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