uni-app中view实现多选,点击选中并改变样式,再点击取消
程序员文章站
2022-07-14 22:57:25
...
效果图:
template:
<view :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">{{value.name}}</view>
js:
export default {
data(){
return{
rSelect:[]
}
},
methods:{
tapInfo(e) {
if (this.rSelect.indexOf(e) == -1) {
console.log(e)//打印下标
this.rSelect.push(e);//选中添加到数组里
} else {
this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
}
}
}
}
css(选中样式):
.cur {
color: white;
border: 1px solid #e5e5e5;
background-color: #ff5d00;
}
上一篇: JS 判断 当前浏览器类型
下一篇: PHP 判断当前浏览器版本