vue实现点击星星评分

Vue 实现点击星星评分

使用 Vue 实现点击星星评分功能可以通过动态绑定类名和事件处理来实现。以下是一个简单的实现方法：

模板部分

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star" 
      @click="setRating(star)"
      :class="{ 'active': star <= currentRating }"
    >
      ★
    </span>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      currentRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
    }
  }
}
</script>

样式部分

<style>
.star-rating span {
  font-size: 24px;
  cursor: pointer;
  color: #ccc;
}

.star-rating span.active {
  color: gold;
}
</style>

实现步骤说明

创建 Vue 组件，定义 currentRating 数据属性来存储当前评分。

在模板中使用 v-for 循环生成 5 个星星元素，每个星星绑定点击事件 @click="setRating(star)"。

通过 :class 动态绑定类名，当星星的索引小于等于 currentRating 时添加 active 类。

在 setRating 方法中更新 currentRating 的值，触发视图更新。

添加 CSS 样式，默认星星为灰色，激活状态为金色。

可选功能扩展

添加半星评分功能，可以通过修改模板和逻辑来实现更精细的评分。

支持禁用状态，添加 disabled 属性来控制是否允许点击。

添加评分变化事件，使用 $emit 通知父组件评分变化。

存储评分到本地存储或后端，实现持久化功能。

这个实现简单直观，可以根据实际需求进行扩展和定制。