vue实现点击星星评分
Vue 实现点击星星评分
使用 Vue 实现点击星星评分功能可以通过动态绑定类名和事件处理来实现。以下是一个简单的实现方法：
模板部分
<template>
<div class="star-rating">
<span
v-for="star in 5"
:key="star"
@click="setRating(star)"
:class="{ 'active': star <= currentRating }"
>
★
</span>
</div>
</template>脚本部分
<script>
export default {
data() {
return {
currentRating: 0
}
},
methods: {
setRating(star) {
this.currentRating = star
}
}
}
</script>样式部分
<style>
.star-rating span {
font-size: 24px;
cursor: pointer;
color: #ccc;
}
.star-rating span.active {
color: gold;
}
</style>实现步骤说明
创建 Vue 组件，定义 currentRating 数据属性来存储当前评分。
在模板中使用 v-for 循环生成 5 个星星元素，每个星星绑定点击事件 @click="setRating(star)"。
通过 :class 动态绑定类名，当星星的索引小于等于 currentRating 时添加 active 类。
在 setRating 方法中更新 currentRating 的值，触发视图更新。
添加 CSS 样式，默认星星为灰色，激活状态为金色。
可选功能扩展
添加半星评分功能，可以通过修改模板和逻辑来实现更精细的评分。
支持禁用状态，添加 disabled 属性来控制是否允许点击。
添加评分变化事件，使用 $emit 通知父组件评分变化。
存储评分到本地存储或后端，实现持久化功能。
这个实现简单直观，可以根据实际需求进行扩展和定制。
