Vue是一款流行的JavaScript框架，它可以用來建立Web應用程式。除了其強大的功能和易於使用的API之外，Vue還提供了大量的擴充功能和插件，使Web開發人員可以快速地開發各種Web應用程式。本文將向您展示如何使用Vue.js建立一個簡單的投票應用程式。
步驟1：準備工作
在開始編寫程式碼之前，首先需要安裝Vue.js。您可以使用Vue的CDN或npm下載安裝套件來安裝Vue.js。此外，您還需要一個文字編輯器，例如Visual Studio Code，來編輯Vue.js應用程式。
步驟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應用程式定義了兩個資料屬性：title和options。這些屬性儲存了我們在頁面上顯示的資料。
步驟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應用程式的資料屬性，以包含一個votes數組，用於儲存每個選項的投票數。我們也在Vue應用程式中定義了vote方法，該方法在使用者點擊選項時將選項的投票數加1。最後，我們使用Vue.js的計算屬性來計算每個選項的投票比例。當使用者投票時，頁面將更新以反映所有投票的投票結果。
結論
在本文中，我們介紹如何在Vue.js中撰寫投票應用程式。我們始終建議您閱讀Vue.js文件中的更多內容，以了解關於Vue.js的更多資訊和用法。借助Vue.js，您可以輕鬆地開發各種Web應用程序，並在其中實現各種功能。
以上是vue怎麼寫投票的詳細內容。更多資訊請關注PHP中文網其他相關文章！
