当前位置：首页 > VUE

vue怎么实现点星

2026-01-22 22:53:48VUE

在 Vue 中实现点星（星级评分）功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 动态渲染星星

通过 v-for 循环生成星星图标，结合点击事件动态切换选中状态：

vue怎么实现点星

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

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

<style>
.active {
  color: gold;
}
</style>

使用第三方组件库

许多 UI 库提供了现成的星级评分组件，例如 Element UI 的 Rate 组件：

vue怎么实现点星

<template>
  <el-rate v-model="rating"></el-rate>
</template>

<script>
import { ElRate } from 'element-plus'

export default {
  components: {
    ElRate
  },
  data() {
    return {
      rating: 0
    }
  }
}
</script>

自定义 SVG 星星

使用 SVG 创建更灵活的星星形状，并通过计算属性控制填充状态：

<template>
  <div>
    <svg 
      v-for="star in 5" 
      :key="star"
      @click="rate(star)"
      width="24" 
      height="24"
      viewBox="0 0 24 24"
    >
      <path 
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
        :fill="star <= selectedStars ? 'gold' : 'gray'"
      />
    </svg>
  </div>
</template>

实现半星评分

如果需要支持半星评分，可以扩展基本实现：

<template>
  <div>
    <span 
      v-for="star in 5" 
      :key="star"
      @click="rate(star)"
      @mousemove="hoverRating = star"
      @mouseleave="hoverRating = null"
    >
      <span v-if="star <= (hoverRating || selectedStars)">★</span>
      <span v-else-if="star - 0.5 <= (hoverRating || selectedStars)">½</span>
      <span v-else>☆</span>
    </span>
  </div>
</template>

每种方法都有其适用场景，简单项目可以使用原生实现，复杂项目推荐使用成熟的组件库以获得更好的交互体验和可访问性。

标签: vue