Cara menulis undian dalam vue

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina aplikasi web. Selain ciri hebatnya dan API yang mudah digunakan, Vue juga menyediakan sejumlah besar fungsi sambungan dan pemalam yang membolehkan pembangun web membangunkan pelbagai aplikasi web dengan pantas. Artikel ini akan menunjukkan kepada anda cara membina aplikasi undian mudah menggunakan Vue.js.

Langkah 1: Persediaan

Sebelum anda mula menulis kod, anda perlu memasang Vue.js terlebih dahulu. Anda boleh menggunakan CDN atau npm Vue untuk memuat turun pakej pemasangan untuk memasang Vue.js. Selain itu, anda memerlukan editor teks, seperti Kod Visual Studio, untuk mengedit aplikasi Vue.js.

Langkah 2: Bina aplikasi pengundian

Selepas kerja-kerja penyediaan, seterusnya, kita mulakan langkah-langkah membina aplikasi pengundian. Kami akan menggunakan Vue.js untuk kod HTML, CSS dan JavaScript.

Mula-mula, kami mencipta fail HTML dan menambah kod berikut:

<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>

Dalam kod HTML di atas, Kami mentakrifkan aplikasi Vue yang mengandungi templat asas dengan pengepala dan senarai pilihan. Kami menggunakan arahan v-for Vue.js untuk beralih melalui senarai pilihan dan menambahkannya pada halaman. Selain itu, kami telah menentukan dua sifat data untuk aplikasi Vue: tajuk dan pilihan. Sifat ini menyimpan data yang kami paparkan pada halaman.

Langkah 3: Tambah fungsi pengundian

Sekarang kita mempunyai halaman asas, mari tambah fungsi pengundian. Dalam aplikasi pengundian kami, kami menggunakan arahan v-on Vue.js untuk melaksanakan fungsi pengundian.

Untuk melaksanakan fungsi pengundian, kami perlu menentukan pengendali acara yang akan dipanggil apabila pengguna mengklik pada pilihan. Untuk melakukan ini, kami mengubah suai sifat dalam sifat data aplikasi Vue untuk mengenal pasti pilihan yang telah dipilih. Kami juga menggunakan sifat pengiraan Vue.js untuk mengira perkadaran undian bagi setiap pilihan:

<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>

Dalam kod di atas, kami Mengemas kini Sifat data aplikasi Vue untuk memasukkan tatasusunan undi yang menyimpan bilangan undian untuk setiap pilihan. Kami juga telah menentukan kaedah undian dalam aplikasi Vue yang menambah kiraan undi pilihan sebanyak 1 apabila pengguna mengklik pada pilihan. Akhir sekali, kami menggunakan sifat pengiraan Vue.js untuk mengira perkadaran undian yang diberikan bagi setiap pilihan. Apabila pengguna mengundi, halaman akan dikemas kini untuk menggambarkan keputusan pengundian untuk semua undian yang diberikan.

Kesimpulan

Dalam artikel ini, kami membincangkan cara menulis permohonan mengundi dalam Vue.js. Kami sentiasa mengesyorkan membaca lebih lanjut dalam dokumentasi Vue.js untuk mengetahui lebih lanjut tentang dan penggunaan Vue.js. Dengan Vue.js, anda boleh membangunkan pelbagai aplikasi web dengan mudah dan melaksanakan pelbagai fungsi di dalamnya.

Atas ialah kandungan terperinci Cara menulis undian dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!