当前位置：首页 > VUE

vue实现简单星星评分

2026-02-25 20:53:12VUE

Vue 实现简单星星评分

基本思路

使用 Vue 的数据绑定和事件处理能力，通过 v-for 渲染星星图标，根据评分状态动态切换样式（如空心/实心）。核心逻辑包括：

数据驱动：通过 currentRating 和 hoverRating 控制显示状态
交互反馈：鼠标悬停、点击事件触发评分变化

代码实现

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star"
      @click="setRating(star)"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
      :class="['star', { 'filled': (hoverRating || currentRating) >= star }]"
    >
      ★
    </span>
    <p v-if="currentRating">当前评分: {{ currentRating }}星</p>
  </div>
</template>

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

<style>
.star-rating {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
}
.star {
  display: inline-block;
  transition: color 0.2s;
}
.filled {
  color: gold;
}
</style>

功能扩展方案

允许半星评分

// 修改模板部分
<span 
  v-for="star in 5" 
  :key="star"
  @click="setRating(star - 0.5)"
  @mouseover="hoverRating = star - 0.5"
>
  <span :class="['half-star', { 'filled': (hoverRating || currentRating) >= star - 0.5 }]">★</span>
  <span :class="['full-star', { 'filled': (hoverRating || currentRating) >= star }]">★</span>
</span>

// CSS 添加定位处理
.half-star {
  position: absolute;
  width: 50%;
  overflow: hidden;
}

只读模式

<span 
  v-for="star in 5" 
  :key="star"
  :class="['star', { 'filled': currentRating >= star }]"
>
  ★
</span>

组件化建议

可封装为可复用组件，通过 props 接收配置：

props: {
  maxStars: {
    type: Number,
    default: 5
  },
  initialRating: {
    type: Number,
    default: 0
  },
  readOnly: {
    type: Boolean,
    default: false
  }
}