点击选中且可以取消选中

点击选中且可以取消选中

在html中

<a :class=“{‘cur’: rSelect.indexOf(index)!=-1}” v-for=“(value,index) in infoArr” :key=“index” @tap=“tapInfo(index)”>{{value.name}}
1
在js中

export default {
data(){
return{
rSelect:[],
infoArr:[
{name:‘乘车体验’},
{name:‘线路优化’},
{name:‘提前发车’},
{name:‘没停靠站’},
{name:‘物品遗失’},
{name:‘车票问题’},
{name:‘产品功能’},
{name:‘其他’}
]
}
},
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); //取消
}
}
}
}
export default {
data(){
return{
rSelect:[],
infoArr:[
{name:‘乘车体验’},
{name:‘线路优化’},
{name:‘提前发车’},
{name:‘没停靠站’},
{name:‘物品遗失’},
{name:‘车票问题’},
{name:‘产品功能’},
{name:‘其他’}
]
}
},
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;
}