当前位置：首页 > VUE

vue实现评分案例

2026-02-19 20:59:28VUE

实现评分功能的基本思路

在Vue中实现评分功能通常需要创建一个可交互的星级评分组件。用户可以通过点击或悬停选择评分等级。核心逻辑包括数据绑定、事件处理和样式控制。

创建评分组件

定义一个Vue组件，包含多个星星图标（通常使用字体图标或SVG）。通过v-for循环渲染星星，并根据当前评分或悬停状态动态调整样式。

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

组件逻辑实现

在script部分定义组件逻辑，包括props接收最大星级数，data管理当前评分和悬停状态，methods处理评分设置。

vue实现评分案例

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      rating: this.initialRating,
      hoverRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.rating = star;
      this.$emit('rating-selected', star);
    }
  }
}
</script>

样式美化

为星星添加样式，包括默认状态和激活状态的颜色变化。可以使用CSS实现简单的视觉效果。

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

使用组件示例

在父组件中引入并使用评分组件，监听评分选择事件并处理数据。

vue实现评分案例

<template>
  <div>
    <star-rating 
      :max-stars="5" 
      :initial-rating="3"
      @rating-selected="handleRating"
    />
    <p>当前评分: {{ currentRating }}</p>
  </div>
</template>

<script>
import StarRating from './StarRating.vue';

export default {
  components: {
    StarRating
  },
  data() {
    return {
      currentRating: 3
    }
  },
  methods: {
    handleRating(rating) {
      this.currentRating = rating;
    }
  }
}
</script>