Vue実装のカウンターケース

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>
  • 必要なデータをdataに書き込みます: 番号
  • -メソッドに2つのメソッドを追加: add と subtract
  • v-textまたは差分式を使用して、 numをspanタグに設定します。
  • v-on : (略語@ ) を使用して、 addsub をそれぞれ+ ボタンと -ボタンにバインドします。
  • 累積ロジック: 10 未満の場合は累積し、それ以外の場合はプロンプトを表示します
  • 減算ロジック: 0より大きい場合は徐々に、それ以外の場合は即時
  • このメソッドは、 thisキーワードを使用してデータ内のデータを取得します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはカウンターのシンプルな生成を実装します
  • PC側Vue UIコンポーネントライブラリをゼロから作成する(カウンターコンポーネント)
  • Vuex の使い方と簡単な例 (カウンター)
  • Vuex はカウンターとリストの表示効果を実装します
  • Vuexはシンプルなカウンターを実装する
  • Vueカウンターの実装

<<:  Linux スレッド間の同期と排他制御の知識ポイントのまとめ

>>:  MySQLでSQL文がどのように実行されるかの詳細な説明

推薦する

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...

MySQL エンコーディング utf8 および utf8mb4 utf8mb4_unicode_ci および utf8mb4_general_ci

参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...

WeChatアプレットの下部にあるタブバーがコンテンツをブロックする問題に対処する簡単な方法

WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異...

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...

CSSスプライト技術は複数の背景を1つのPNG画像に統合しますCSSポジショニング

アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定...

MySQL のデッドロック チェックとデッドロック除去の例の詳細な説明

1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証(...

WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します

Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...

Vue実装のカウンターケース

この記事では、カウンター表示を実現するためのVueの具体的なコードを例として紹介します。具体的な内容...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

Node.js のモジュール性、npm パッケージ マネージャーの説明

目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...

MySQL 一時テーブルの簡単な使用法

MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...

Zabbix でフィルターを使用して監視を実装する方法

最近、監視機器の作業をしていたとき、ポートがダウンしているというアラームが常に出ていました。データを...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...