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文がどのように実行されるかの詳細な説明

推薦する

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...

MySQL テーブルにはどのくらいの量のデータを保存できますか?

プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...

HTMLテキストオーバーフローの2つの一般的な解決策は省略記号を表示することです

方法1: CSSオーバーフロー省略を使用して解決する解決策は次のとおりです。 CSSコード: ディス...

Linuxで中断されたシステムを呼び出す方法

序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...

cocoscreatorプレハブの詳しい説明

目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...

バッチファイルを処理するLinuxの1行コマンドの詳細な説明

序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...

MySQL 8.0.11 Mac 用インストール ガイド

MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...

CentOS 7 で Python を 3.6.6 にアップグレードした後に発生する yum エラー問題の解決方法の概要

最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

nginxを使用してドメイン名ベースの仮想ホストを構成する

1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...

Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル

この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...