vue手写星级评分

基于vue的星级评分方法

效果图如下

<u-image 
@click='score(index)' 
v-for="(item,index) in xList" 
:key='index' 
:src="item.src" 
width='34rpx' height='35rpx' style='margin-right: 25rpx;'
></u-image>

data里面声明数据

xList:[
	{i:0,src:'../../static/wxz.png'},
	{i:1,src:'../../static/wxz.png'},
	{i:2,src:'../../static/wxz.png'},
	{i:3,src:'../../static/wxz.png'},
	{i:4,src:'../../static/wxz.png'},
]

点击事件

score(index){
	this.xList.map(res =>{
		res.src = '../../static/wxz.png' //每次点击先恢复为原来的灰色星星
		if(res.i <= index){
			res.src = '../../static/icon_xx_pre.png'//遍历将i<=点击的下标的星星点亮
		}
	})
}

还有一个很简单的方法是u-view里面有组件
如果你的项目使用的u-view，那就不用写了直接去C&V吧~