vue五星评价的案例

效果图

html代码

<span v-for="(item, index) in star" :key="index" :class="index <= s_l?'el-icon-star-on':'el-icon-star-off'" @click="getStar(index)"></span>

js代码

export default {
	data() {
		return {
			star: [0, 1, 2, 3, 4],
			s_l: -1,
			old_index: null
		};
	},
	methods: {
		//点亮星星
		getStar(index) {
			if (this.old_index == index) {
				this.s_l = index - 1;
				this.score--;
				this.old_index--;
				return;
			}
			this.s_l = index;
			this.score = index + 1;
			this.old_index = index;
		}
	}
};