vue 实现多选

上个小小的效果图，然后具体实现看代码

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 （这里是别的大佬写的详解，可以看一下）