在这个信息化迅猛发展的时代，在线投票系统越来越被广泛应用。今天，我们将使用Vue3和其提供的Composition API，来实现一个简单的在线投票系统。本文将详细介绍系统的结构、基本功能以及实现方法，包括示例代码帮助你更好地理解。

项目结构

我们的投票系统将包含以下几个部分：

投票选项列表 - 显示所有可供选择的投票选项。投票功能 - 允许用户选择某个选项进行投票。结果显示 - 显示投票结果。

我们将使用Vue3的<code>setup语法糖来实现这个系统。

环境准备

确保你已经安装了Node.js和Vue CLI，接下来可以通过以下命令创建一个新的Vue3项目：

vue create online-voting

选择“Vue 3”并完成项目创建后，进入项目文件夹：

cd online-voting

接下来安装Vue Router，因为我们会在单页应用中使用它：

npm install vue-router

创建投票组件

我们将在src/components目录下创建一个新的组件VotingSystem.vue。以下是VotingSystem.vue的代码：

<template>

<div class="voting-system">code>

<h1>在线投票系统</h1>

<h2>请为以下选项投票：</h2>

<div v-for="option in options" :key="option.id" class="option">code>

<input type="radio" :value="option.id" v-model="selectedOption" />code>

<label>{ { option.name }}</label>

<span class="vote-count">（{ { option.votes }}票）</span>code>

</div>

<button @click="castVote">投票</button>code>

<div v-if="hasVoted" class="result">code>

<h2>投票结果：</h2>

<ul>

<li v-for="option in options" :key="option.id">code>

{ { option.name }}: { { option.votes }}票

</li>

</ul>

</div>

</div>

</template>

<script>

import { ref } from 'vue';

export default {

name: 'VotingSystem',

setup() {

// 投票选项

const options = ref([

{ id: 1, name: '选项一', votes: 0 },

{ id: 2, name: '选项二', votes: 0 },

{ id: 3, name: '选项三', votes: 0 }

]);

// 选中的选项

const selectedOption = ref(null);

// 是否已投票

const hasVoted = ref(false);

// 投票方法

const castVote = () => {

if (!selectedOption.value) {

alert('请先选择一个选项！');

return;

}

const option = options.value.find(opt => opt.id === selectedOption.value);

if (option) {

option.votes++;

hasVoted.value = true;

}

};

return {

options,

selectedOption,

hasVoted,

castVote

};

}

};

</script>

<style scoped>

.voting-system {

max-width: 600px;

margin: auto;

text-align: center;

}

.option {

display: flex;

align-items: center;

}

.vote-count {

margin-left: 10px;

}

</style>

组件细节解析