当前位置：首页 > VUE

vue点击实现星星评价

2026-01-22 18:38:02VUE

实现星星评价功能

在Vue中实现星星评价功能可以通过动态渲染星星图标并绑定点击事件来完成。以下是具体实现方法：

数据准备

定义评价等级和当前选中状态的数据：

data() {
  return {
    rating: 0, // 当前评分
    maxRating: 5, // 最大评分
    hoverRating: 0 // 鼠标悬停时的临时评分
  }
}

模板结构

使用v-for循环渲染星星，并绑定相关事件：

<div class="star-rating">
  <span 
    v-for="star in maxRating" 
    :key="star"
    @click="setRating(star)"
    @mouseover="setHoverRating(star)"
    @mouseleave="resetHoverRating"
    :class="{ 'active': star <= (hoverRating || rating) }"
  >
    ★
  </span>
</div>

样式设置

通过CSS控制星星的样式和颜色：

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

.star-rating span.active {
  color: #ffcc00;
}

方法实现

添加处理评分变化的方法：

methods: {
  setRating(star) {
    this.rating = star;
    // 这里可以添加提交评分的逻辑
  },
  setHoverRating(star) {
    this.hoverRating = star;
  },
  resetHoverRating() {
    this.hoverRating = 0;
  }
}

完整组件示例

将上述代码整合成一个可复用的组件：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxRating" 
      :key="star"
      @click="setRating(star)"
      @mouseover="setHoverRating(star)"
      @mouseleave="resetHoverRating"
      :class="{ 'active': star <= (hoverRating || rating) }"
    >
      ★
    </span>
    <p>当前评分: {{ rating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      maxRating: 5,
      hoverRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.rating = star;
    },
    setHoverRating(star) {
      this.hoverRating = star;
    },
    resetHoverRating() {
      this.hoverRating = 0;
    }
  }
}
</script>

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

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

进阶功能

如果需要半星评价功能，可以使用更复杂的逻辑和图标：

data() {
  return {
    rating: 0,
    maxRating: 10, // 实际显示5星，但用10来表示半星
    hoverRating: 0
  }
},
methods: {
  setRating(star) {
    this.rating = star;
  },
  displayStar(index) {
    const value = index * 2;
    return value <= this.hoverRating || value <= this.rating ? '★' : '☆';
  }
}

使用图标库

可以使用Font Awesome等图标库替代文本星星：

vue点击实现星星评价

<span 
  v-for="star in maxRating" 
  :key="star"
  @click="setRating(star)"
>
  <i :class="['fa', star <= rating ? 'fa-star' : 'fa-star-o']"></i>
</span>