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文がどのように実行されるかの詳細な説明
推薦する
スプライトとフォントアイコンを実装するためのCSS
スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...
JavaScript が Jingdong の虫眼鏡の特殊効果を模倣
この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...
MySQL ジョイントインデックス（複合インデックス）の実装
共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...
nginx を使用して特定のインターフェース (URL) をブロックする方法
1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...
.htaccess を使用して特定の IP からの Web サイトへのアクセスを禁止する方法
序文コストを考慮して、ほとんどのウェブマスターは、多数の小規模なウェブサイト用にサーバーを個別に購入...
CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明
音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...
Nginx 書き換えジャンプの適用シナリオの詳細な説明
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
MySQLにおけるトランザクションの永続性実装原理の詳細な説明
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...
Tomcat が非同期サーブレットを実装する方法の詳細な説明
序文これまでの Tomcat シリーズの記事を通じて、私のブログを読んでいる学生は Tomcat に...
nginx ウェブサイト サービスのアンチホットリンクを設定する方法 (推奨)
1. ホットリンクの原則1.1 Webページの準備Web ソース ホスト (192.168.153...
vue3 における vuex と pinia の落とし穴
目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...
JavaScriptページングコンポーネントの使い方の詳細な説明
ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...
Ubuntu 20.04 LTSの詳細なインストール履歴
この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...
SQL実行ステップの詳細な分析
SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...
JavaScript イベント委任の原則
目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...