この記事では、カウンター表示を実現するための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文がどのように実行されるかの詳細な説明
1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...
参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...
WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異...
ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...
序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...
アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定...
1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証(...
Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...
この記事では、カウンター表示を実現するためのVueの具体的なコードを例として紹介します。具体的な内容...
最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...
最近、監視機器の作業をしていたとき、ポートがダウンしているというアラームが常に出ていました。データを...
この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...
ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...