vue实现一个星级打分效果_vue 星星评分组件

可以使用vue的组件化思想来实现一个星级打分效果。

首先，在组件内部定义一个data属性，用来存储当前评分的分数。然后，在模板中使用循环语句来渲染五个星星，并根据当前分数来决定星星的颜色。

接着，为每个星星添加鼠标移入、移出、点击事件，用来改变当前分数并触发相应的回调函数。

最后，把组件封装成一个单独的.vue文件，可以在其他组件中引用。

下面是一个简单的例子：

<template>
  <div class="star-rating">
    <span v-for="n in 5" :key="n" class="star"
          :class="{ 'filled': n <= currentRating }"
          @mouseenter="hoverRating(n)"
          @mouseleave="hoverRating(0)"
          @click="setRating(n)">
      ★
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0
    }
  },
  methods: {
    hoverRating(rating) {
      this.currentRating = rating
    },
    setRating(rating) {
      this.currentRating = rating
      this.$emit('rating-changed', rating)
    }
  }
}
</script>

<style>
.star-rating {
  display: inline-block;
  font-size: 2em;
  width: 5em;
  text-align: center;
}

.star {
  color: #ccc;
  cursor: pointer;
}

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

在父组件中，可以通过监听子组件的`rating-changed`事件来获取当前评分的分数，如下所示：

<template>
  <div>
    <star-rating @rating-changed="handleRatingChanged"></star-rating>
    <p>You rated this item {{ rating }} stars.</p>
  </div>
</template>

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

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