上个小小的效果图,然后具体实现看代码
template
<view v-for="(item, index) in list" @click="choose(index)">
<view class="choose" :class="{green:arr.includes(index)}"></view>
<view>{{item.name}}</view>
<view>聊天</view>
</view>
style
/* 这是没选中的样式 */
.choose {
border: solid #D3D3D3 2rpx;
border-radius: 50%;
width: 20rpx;
height: 20rpx;
}
/* 这是选中的样式 */
.green {
background-color: #4CD964;
border: solid #4CD964 2rpx;
}
data
list: [
{
name: '张三'
},
{
name: '张三'
},
{
name: '张三'
}
],
arr: [],
methods
choose: function(i) {
console.log(i);
if (this.arr.includes(i)) {
//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
//filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
this.arr = this.arr.filter(function(ele) {
return ele != i;
});
} else {
this.arr.push(i);
}
}
tip:
这里面有两个es6的语法,includes (这里是别的大佬写的详解,可以看一下)和 filter (这里是别的大佬写的详解,可以看一下)