vue实现点击选择多选标签（整理）

css
.listBox{
  display: flex;
  flex-wrap: wrap;
}
.list {
  border: 1px solid #BEC3CB;
  padding: 11px 27px;
  border-radius: 100px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.checked {
  color: #FFFFFF;
  background: #3377FF;
  border: 1px solid #3377FF;
}
html
<div class="listBox">
  <div class="list" v-for="c,index of labelList" :key="index" :class="{checked:arr.includes(index)}"
    @click="checkedBox(index)">{{c}}</div>
</div>
data() {
  return {
      labelList: ["标签1", "标签2", "标签3", "标签4", "标签5"],
      arr: [],
  }
}
methods: {
  // 点击多选标签
  checkedBox(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);
      console.log(this.arr)
    }
  },
}