この記事では、カウンター表示を実現するための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文がどのように実行されるかの詳細な説明
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...
目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...
プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...
プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...
方法1: CSSオーバーフロー省略を使用して解決する解決策は次のとおりです。 CSSコード: ディス...
序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...
目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...
序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...
MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...
最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...
MySQL データベースのバージョンを 5.6.28 から 8.0.11 にアップグレード中にプロジ...
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...