Vue実装のカウンターケース
|
この記事では、カウンター表示を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。 効果：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>カウンター</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スタイル タイプ="text/css">
＃アプリ{
テキスト配置: 中央;
マージン: 0 自動;
行の高さ: 500px;
}
#アプリ入力{
幅: 50px;
高さ: 40px;
フォントサイズ: 20px;
境界線の半径: 5px;
アウトライン: なし;
/* カスタム境界線 */
境界線: 1px 透明の実線;
背景色: 青;
行の高さ: 30px;
色: 白;
}
#アプリスパン{
パディング: 20px 20px;
境界線: 1px;
}
</スタイル>
</head>
<本文>
<div id="アプリ">
<input type="button" value="-" @click="sub"/>
<span>{{数値}}</span>
<input type="button" value="+" @click="追加"/>
</div>
<スクリプト>
var アプリ = 新しい Vue({
el: "#app",
データ： {
番号: 1
},
方法:{
追加: 関数(){
if(this.num<10){
this.num++;
}それ以外{
alert("最大値に達しました!");
}
},
サブ: 関数(){
if(this.num>0){
this.num--;
}それ以外{
alert("消えたよ!");
}
}
}
})
</スクリプト>
</本文>
</html>
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux スレッド間の同期と排他制御の知識ポイントのまとめ
>>: MySQLでSQL文がどのように実行されるかの詳細な説明
推薦する
React Fragment の紹介と詳しい使い方
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)
mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...
Docker のインストールと構成イメージの高速化の実装
目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...
JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明
プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...
MySQL テーブルにはどのくらいの量のデータを保存できますか?
プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...
HTMLテキストオーバーフローの2つの一般的な解決策は省略記号を表示することです
方法1: CSSオーバーフロー省略を使用して解決する解決策は次のとおりです。 CSSコード: ディス...
Linuxで中断されたシステムを呼び出す方法
序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...
cocoscreatorプレハブの詳しい説明
目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...
バッチファイルを処理するLinuxの1行コマンドの詳細な説明
序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...
MySQL 8.0.11 Mac 用インストール ガイド
MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...
CentOS 7 で Python を 3.6.6 にアップグレードした後に発生する yum エラー問題の解決方法の概要
最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...
Mysql データベースをバージョン 5.6.28 からバージョン 8.0.11 にアップグレードするときにプロジェクトを展開するときに発生する問題と解決策
MySQL データベースのバージョンを 5.6.28 から 8.0.11 にアップグレード中にプロジ...
Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
nginxを使用してドメイン名ベースの仮想ホストを構成する
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル
この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...