当前位置：首页 > VUE

vue实现微博投票

2026-02-23 01:48:21VUE

Vue 实现微博投票功能

微博投票功能通常包含投票选项展示、用户选择、提交投票和结果显示等模块。以下是一个基于 Vue 的实现方案：

数据准备

在 Vue 的 data 中定义投票相关数据，包括标题、选项列表和用户选择状态：

data() {
  return {
    voteTitle: '你最喜欢的编程语言是什么？',
    options: [
      { id: 1, text: 'JavaScript', count: 0 },
      { id: 2, text: 'Python', count: 0 },
      { id: 3, text: 'Java', count: 0 },
      { id: 4, text: 'C++', count: 0 }
    ],
    selectedOption: null,
    hasVoted: false
  }
}

模板渲染

使用 v-for 渲染投票选项，并通过 v-model 绑定用户选择：

vue实现微博投票

<div class="vote-container">
  <h3>{{ voteTitle }}</h3>
  <div v-if="!hasVoted">
    <div 
      v-for="option in options" 
      :key="option.id"
      class="option-item"
    >
      <input 
        type="radio" 
        :id="'option'+option.id" 
        :value="option.id" 
        v-model="selectedOption"
      >
      <label :for="'option'+option.id">{{ option.text }}</label>
    </div>
    <button @click="submitVote">提交投票</button>
  </div>
</div>

提交逻辑

实现投票提交方法，更新选项计数并标记已投票状态：

methods: {
  submitVote() {
    if (!this.selectedOption) return alert('请选择一个选项')

    const selected = this.options.find(
      opt => opt.id === this.selectedOption
    )
    selected.count++
    this.hasVoted = true
  }
}

结果显示

添加结果显示区域，展示各选项得票数和百分比：

vue实现微博投票

<div v-if="hasVoted" class="result-container">
  <h4>投票结果</h4>
  <div 
    v-for="option in options" 
    :key="option.id"
    class="result-item"
  >
    <div class="option-text">{{ option.text }}</div>
    <div class="progress-bar">
      <div 
        class="progress" 
        :style="{ width: getPercentage(option) + '%' }"
      ></div>
    </div>
    <div class="vote-count">
      {{ option.count }}票 ({{ getPercentage(option) }}%)
    </div>
  </div>
</div>

计算百分比的方法：

methods: {
  getPercentage(option) {
    const total = this.options.reduce(
      (sum, opt) => sum + opt.count, 0
    )
    return total > 0 
      ? Math.round((option.count / total) * 100) 
      : 0
  }
}

样式增强

添加基础CSS样式提升用户体验：

.option-item {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

button {
  margin-top: 15px;
  padding: 8px 16px;
  background: #1da1f2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.result-item {
  margin: 15px 0;
}

.progress-bar {
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  margin: 5px 0;
}

.progress {
  height: 100%;
  background: #1da1f2;
  border-radius: 10px;
}

完整组件

将上述代码组合成完整组件：

<template>
  <!-- 模板部分如上 -->
</template>

<script>
export default {
  data() {
    // 数据部分如上
  },
  methods: {
    // 方法部分如上
  }
}
</script>

<style scoped>
/* 样式部分如上 */
</style>

这个实现包含了微博投票的基本功能，可以根据需求进一步扩展多选投票、截止时间、投票限制等功能。

标签: vue