vue实现标签的双向选择

实现的效果如下：

未选择时：

 选择一个或者多选时

 取消选择时

 具体代码如下

<template>
  <div class="tagBox">
    <div class="tagBox_tabBoxL">
      <span
        :class="[{ active: checkedGroup.indexOf(index) > -1 }]"
        :key="item.id || index"
        v-for="(item,index) in saveTagList"
        @click="changeTagList(item.id,index)"
      >{{item.name}}</span> 
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checkedGroup: [],
      saveTagList: [
        { id: 1, name: "苹果" },
        { id: 2, name: "葡萄" },
        { id: 2, name: "雪梨" },

        { id: 2, name: "西瓜" },

      ],
    };
  },
  methods: {
    changeTagList(id,index){
      if(this.checkedGroup.indexOf(index) == -1){
        this.checkedGroup.push(index)
      }else{
        let spliceIndex = this.checkedGroup.indexOf(index);
        this.checkedGroup.splice(spliceIndex,1)
      }
    }
  },
};
</script>

<style scoped>
.tagBox{
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  line-height: 16px;
  padding-bottom: 10px;
}
.tagBox_tabBoxL{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
span{
  margin-right: 10px;
  color: #111;
  background: #fff;
  white-space: nowrap;
  border-right: 5px;
  border: 1px solid #ccc;
  padding: 2px 8px;
}
span.active{
  font-size: 14px;
  border: 1px solid #FF9600;
  color:#FF9600 ;
}
</style>