vue五星评价的案例

vue 专栏收录该内容
30 篇文章 0 订阅

效果图
在这里插入图片描述
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;
		}
	}
};
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值