vueでの投票の書き方

Vue は、Web アプリケーションの構築に使用できる人気のある JavaScript フレームワークです。 Vue は、強力な機能と使いやすい API に加えて、Web 開発者がさまざまな Web アプリケーションを迅速に開発できるようにする多数の拡張機能とプラグインも提供します。この記事では、Vue.js を使用して簡単な投票アプリケーションを構築する方法を説明します。

ステップ 1: 準備

コードの作成を開始する前に、まず Vue.js をインストールする必要があります。 Vue の CDN または npm を使用してインストール パッケージをダウンロードし、Vue.js をインストールできます。さらに、Vue.js アプリケーションを編集するには、Visual Studio Code などのテキスト エディターが必要です。

ステップ 2: 投票アプリケーションを構築する

準備作業が完了したら、次に投票アプリケーションを構築する手順を開始します。 Vue.js を使用して HTML、CSS、JavaScript をコーディングします。

まず、HTML ファイルを作成し、次のコードを追加します。

<meta charset="utf-8">
<title>投票应用程序</title>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="option in options">
      {{ option }}
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      title: '我的投票应用程序',
      options: ['选项1', '选项2', '选项3']
    }
  })
</script>

上記の HTML コードでは、Vue を定義しますヘッダーとオプションのリストを含む基本テンプレートを含むアプリケーション。 Vue.js の v-for ディレクティブを使用して、オプションのリストを反復処理し、オプションをページに追加します。さらに、Vue アプリケーション用にタイトルとオプションという 2 つのデータ プロパティを定義しました。これらのプロパティには、ページに表示するデータが保存されます。

ステップ 3: 投票機能を追加する

基本的なページができたので、投票機能を追加しましょう。私たちの投票アプリケーションでは、Vue.js の v-on ディレクティブを使用して投票機能を実装します。

投票機能を実装するには、ユーザーがオプションをクリックしたときに呼び出されるイベント ハンドラーを定義する必要があります。これを行うには、Vue アプリケーションのデータ プロパティのプロパティを変更して、どのオプションが選択されているかを識別します。また、Vue.js の計算プロパティを使用して、各オプションの投票割合を計算します。

<meta charset="utf-8">
<title>投票应用程序</title>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="(option, index) in options" v-on:click="vote(index)">
      {{ option }}
      <span v-show="votes[index]">{{ votes[index] }} 票（{{ percentage(index) }}%）</span>
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      title: '我的投票应用程序',
      options: ['选项1', '选项2', '选项3'],
      votes: [0, 0, 0]
    },
    methods: {
      vote: function(index) {
        this.votes[index] += 1;
      }
    },
    computed: {
      totalVotes: function() {
        return this.votes.reduce(function(sum, vote) {
          return sum + vote;
        }, 0);
      },
      percentage: function(index) {
        if (this.votes[index] === 0) {
          return 0;
        }
        return Math.round(this.votes[index]/this.totalVotes * 100);
      }
    }
  })
</script>

上記のコードでは、Vue アプリケーションのデータを更新しました。プログラムの属性に、各オプションの投票数を格納するための投票配列を含めます。また、ユーザーがオプションをクリックしたときにオプションの投票数を 1 つ増やす投票メソッドを Vue アプリケーションに定義しました。最後に、Vue.js の計算プロパティを使用して、各オプションの投票シェアを計算します。ユーザーが投票すると、ページが更新され、投じられたすべての投票の投票結果が反映されます。

結論

この記事では、Vue.js で投票アプリケーションを作成する方法について説明しました。 Vue.js の詳細と使用法については、Vue.js ドキュメントを参照することを常にお勧めします。 Vue.js を使用すると、さまざまな Web アプリケーションを簡単に開発し、そこにさまざまな機能を実装できます。

以上がvueでの投票の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。