实现一个简单的投票应用：Vue3与实时数据

原创

日晚间粉 2024-08-20 13:57:33 ©著作权

©著作权归作者所有：来自51CTO博客作者日晚间粉的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现一个简单的投票应用：Vue3与实时数据

在前端开发中，投票应用是一个经典的示例，它既涉及到用户交互，又能展示如何处理实时数据。在这篇博客中，我们将使用 Vue 3 的组合 API 和 setup 语法糖，来构建一个简单的投票应用。这个应用支持即刻投票，用户可以选择不同的选项，并且在投票后能实时看到当前的统计结果。

项目结构

在开始之前，我们需要确定一下项目结构。我们的应用将由以下几个主要部分构成：

投票选项 (选项可以是多个)
投票按钮
显示结果 (当前选票统计)

1. 初始化项目

首先，我们需要使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令：

npm install -g @vue/cli
vue create voting-app

选择 Vue 3 和 Babel。

进入项目目录并启动项目：

cd voting-app
npm run serve

2. 创建投票应用组件

在 src/components 文件夹下创建一个新的组件 Voting.vue，用来实现我们的投票功能。

<template>
  <div class="voting-app">
    <h1>投票系统</h1>
    <div class="options">
      <label v-for="option in options" :key="option.text">
        <input
          type="radio"
          :value="option.text"
          v-model="selectedOption"
        />
        {{ option.text }}
      </label>
    </div>
    <button @click="submitVote">投票</button>
    <div v-if="results.length">
      <h2>投票结果</h2>
      <ul>
        <li v-for="(count, option) in results" :key="option">
          {{ option }}: {{ count }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  name: 'Voting',
  setup() {
    const options = ref([
      { text: '选项 A' },
      { text: '选项 B' },
      { text: '选项 C' },
    ]);

    const selectedOption = ref(null);
    const results = reactive({});

    const submitVote = () => {
      if (selectedOption.value) {
        results[selectedOption.value] = (results[selectedOption.value] || 0) + 1;
        selectedOption.value = null; // 清空选中的选项
      } else {
        alert('请先选择一项投票！');
      }
    };

    return { options, selectedOption, results, submitVote };
  },
};
</script>

<style scoped>
.voting-app {
  max-width: 400px;
  margin: auto;
  text-align: center;
}

.options {
  margin-bottom: 20px;
}
</style>

3. 解析代码

在上面的 Voting.vue 中，我们通过 Vue 3 的组合 API 来创建一个简单的投票系统。这里是各部分代码的解析：

数据定义：

options：投票选项数组，使用 ref 进行响应式管理。
selectedOption：用户选择的选项，使用 ref 来保存当下选择。
results：存储投票结果，使用 reactive 创建响应式对象，它的键是选项文本，值是对应的票数。

提交投票：

submitVote 函数在用户按下投票按钮后触发，检查是否已选择选项。如果已选择则将选中选项的票数加1，并重置选中状态。

HTML部分：

渲染投票选项和结果。使用 v-for 指令动态生成选项和投票结果。

4. 在主应用中使用投票组件

现在我们已经创建了 Voting.vue 组件，接下来把它引入到主应用中。在 src/App.vue 中引入并使用它：

<template>
  <div id="app">
    <Voting />
  </div>
</template>

<script>
import Voting from './components/Voting.vue';

export default {
  name: 'App',
  components: {
    Voting,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>