Vueはカウンターのシンプルな生成を実装します
|
この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです。 プロセスの考慮事項
実際のコードとスクリーンショット
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>カウンター</title>
</head>
<本文>
<div id="アプリ">
<!--カウンター機能エリア-->
<div class="input-num">
<ボタン @click="sub">
-
</ボタン>
<span>{{数値}}</span>
<ボタン @click="追加">
+
</ボタン>
</div>
</div>
<!-- 開発バージョン、便利なコマンドライン警告を含む -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
//vueインスタンス var app = new Vue({
el:"#アプリ",
データ： {
番号:1
},
メソッド: {
追加:関数(){
//コンソール.log('追加')
if(this.num<10){
this.num++;
}それ以外{
alert('クリックしないでください。一番大きいものです!');
}
},
サブ:関数(){
//コンソールログ('sub')
if(this.num>0){
this.num--;
}それ以外{
alert('クリックしないでください。最小値です!');
}
}
},
})
</スクリプト>
</本文>
</html>
vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux での MySQL の文字化け問題の解決方法
>>: win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する
推薦する
JavaScript キャンバスでカラフルな太陽のハロー効果を実現
この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...
DevUI で独自の Angular コンポーネント ライブラリを構築する方法
目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...
HTMLエリアタグの詳しい説明
<area> タグは、イメージ マップ内の領域を定義します (注: イメージ マップはク...
jsはシンプルなショッピングカートモジュールを実装します
この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...
Vueユーザーが長時間操作せずにログインページからログアウトするように実装する2つの方法
目次問題の説明フロントエンド制御（方法1）アイデアコードバックエンド制御（方法2）アイデアコード要約...
Docker のタイムゾーンの問題とデータ移行の問題
最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...
MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル（画像とテキスト付き）
公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...
MySQLの文字セットを変更する方法
1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...
onfocus="this.blur()" は視覚障害のあるウェブマスターに嫌われている
スクリーン リーダー ソフトウェアの操作ページについて話しているとき、彼はフロントエンドの学生たちに...
JavaScriptを使用してページ効果を作成する
11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...
CSS で画像アダプティブ コンテナを実装するためのサンプル コード
多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...
システムメンテナンスページにリダイレクトするように nginx を設定する
先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...
Vue3 トランジションアニメーションの落とし穴記録について
目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...
vueはEle.me UIを使用してteambitionのフィルタリング機能を模倣します
目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...
Ubuntu 12.04 でカーネルツリーを構築する実装プロセスの詳細な説明
まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...