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が見つからないという問題が発生する
推薦する
HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
Vueはログインジャンプを実装する
この記事では、ログインジャンプを実装するためのVueの具体的なコードを例として紹介します。具体的な内...
MySQLデータベースインデックスの詳細な紹介
目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...
HTMLのテーブルの内容は中央に水平と垂直に表示されます
CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...
Vue の一般的な問題と解決策の概要 (推奨)
Vue に限定されず、他の種類の SPA プロジェクトにも当てはまる問題がいくつかあります。 1....
Mysql 5.6ではユーザー名とパスワードを変更するメソッドが追加されました
まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...
docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法
Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...
読み取り専用と無効の微妙な違いの詳細な説明
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにします...
Vue3.0 ルーティング自動インポート方法の例
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
iframeを指すaタグのターゲットの名前とIDの違い
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明
序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...
画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法
最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...
DockerとVMwareの競合を解決する
1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...
Ubuntu MySQL バージョンが 5.7 にアップグレードされました
数日前、図書館はサーバー（Ubuntu 14.04）にセキュリティ上の脆弱性があり、時間通りに修復さ...
1 つの記事で Nginx の現在の制限を理解する (簡単な実装)
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...