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 センチネル モードを構成する方法 (複数のサーバー上)

推薦する

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

Linux calコマンドの使用

1. コマンドの紹介cal (カレンダー) コマンドは、現在の日付または指定された日付のグレゴリオ暦...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

Web ページでフラッシュの wmode 属性を使用する方法をご存知ですか?

Web 開発を行う際に、フラッシュがページ内の要素をブロックする状況に遭遇することがあります。フラ...

モバイルデバイス Web 開発における HTML ヘッドの書き方

コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法

序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

MySQLでクエリキャッシュを実行する方法と失敗を解決する方法

関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...

MySQLが正常にインストールされたかどうかを確認する方法

MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...

3つの簡単な調整でMySQLを最適化する

私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...

Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....

5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます

目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...