この記事では、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が見つからないという問題が発生する
インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...
サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...
序文:一部のアプリケーション シナリオでは、成績や年齢によるランキングなど、ランキングの問題が発生す...
mysql の IN はインデックスを無効にしますか?しませんよ! 結果をご覧ください: mysq...
目次1. 応答原理の基盤2. コアオブジェクト: Dep と Watcher 3. 依存関係を収集し...
私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...
1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...
目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...
KILL [接続 | クエリ] processlist_id MySQL では、各接続は個別のスレ...
<br />Web デザインと制作テスト パート I 多肢選択問題 1. 単一選択問題 ...
カバーインデックスとは何ですか?クエリで使用されるすべてのフィールドを含むインデックスを作成すること...
要約すれば: 1. データベースの設計とテーブルの作成時にパフォーマンスを考慮する2. SQLの記述...
目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....