Vueカウンターの実装

Vueカウンターの実装

1. カウンターの実装

ページにカウンターを実装するだけです:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <script src="../js/vue.js"></script>
</head>
<本文>
<div id="アプリ">
  <h3>現在のカウンター: {{counter}}</h3>
  <button @click="add">+</button>
  <button @click="分">-</button>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ: {
      カウンター: 0
    },
    メソッド: {
      追加: 関数 () {
        this.counter++;
      },
      分: 関数 () {
        this.counter--;
      }
    }
  })
</スクリプト>
</本文>
</html>

2. 成果を達成する

最終的な効果は以下の GIF に示されています。

Vue カウンターの実装に関するこの記事はこれで終わりです。Vue カウンターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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

<<:  CSS flex 複数列レイアウト

>>:  Docker で Redis センチネル モードを構成する方法 (複数のサーバー上)

推薦する

Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します

1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...

負の距離(共感) - 相互影響の反復プロセス

ネガティブな距離は共感を意味します。序文(疑問の提起):プロダクトマネージャーは機能を把握します。機...

Windows で mysql 8.0.12 をインストールするための詳細なチュートリアル

この記事では、MySQL 8.0.12のインストール方法に関する詳細なチュートリアルを参考までに紹介...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...

Centos7でmysql6の初期化インストールパスワードをインストールする方法

1. まずデータベースサーバーを停止しますサービスmysqld停止2.vim /etc/my.cnf...

スライダー効果を実装するミニプログラム

この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...

Linux で開いているポートへのリモート アクセスを許可する方法

1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...

JS を使用して配列内の要素の存在を 10 分で判断する

序文フロントエンド開発では、配列内に要素が存在するかどうかを判断する必要があることがよくあります。実...

HTML は Double 11 クーポン取得を実装します (クーポン取得ページを開く時間を設定します)

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...

Linux環境でログファイルを表示するコマンドの詳細な説明

目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...

JavaScript で 9 グリッドのモバイル パズル ゲームを実装

この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...

vue $setは配列コレクションオブジェクトへの値の割り当てを実装します

Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクショ...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

Vue2.0の双方向データバインディング原則を手動で実装する

一言で言えば: データハイジャック (Object.defineProperty) + パブリッシュ...