当前位置：首页 > VUE

vue怎么实现点星

2026-02-23 13:37:25VUE

实现 Vue 点星功能（评分/收藏）

在 Vue 中实现点星功能通常用于评分或收藏场景，以下是两种常见实现方式：

基于组件的事件绑定

创建可交互的星星图标组件，通过点击切换状态：

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

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

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

使用第三方库

对于更复杂的评分需求，可以安装专用库如 vue-star-rating：

vue怎么实现点星

安装依赖：

npm install vue-star-rating

组件使用示例：

vue怎么实现点星

<template>
  <star-rating 
    :rating="rating"
    @rating-selected="setRating"
    :star-size="30"
  />
</template>

<script>
import StarRating from 'vue-star-rating'

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

动态星星效果增强

添加悬停效果提升用户体验：

<template>
  <div class="star-container">
    <span 
      v-for="i in 5"
      :key="i"
      @mouseover="hoverRating = i"
      @mouseleave="hoverRating = 0"
      @click="currentRating = i"
      :class="{
        'active': i <= currentRating,
        'hover': i <= hoverRating
      }"
    >★</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      hoverRating: 0
    }
  }
}
</script>

<style>
.star-container span {
  transition: all 0.2s;
}
.star-container span.hover {
  transform: scale(1.2);
}
</style>

持久化存储

如需保存评分状态，可通过 Vuex 或本地存储：

methods: {
  setRating(rating) {
    this.currentRating = rating
    localStorage.setItem('userRating', rating)
  }
},
created() {
  const saved = localStorage.getItem('userRating')
  if (saved) this.currentRating = Number(saved)
}

标签: vue