vue 多选功能

vue 多选功能

预计实现的效果：
1，多选
2，选中后，再次点击能取消选择

接口返回的数据：

imgList = [ 
'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835261273.jpg',
'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835264326.jpg', 
'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835367647.jpg'
  ]

实现代码：
html：

<div class="annex_imagesLine">
   <div class="annex_imagesOne" v-for="(item,index) in annex_images">
          <div class="flex-box"> <img :src="item" alt="">  </div>
          <div  class="goChoosePic" :class="{'alreadyChoose':arr.includes(item)}"  @click="goChooseAnneximagesClick(item)"></div>
   </div>
</div>

说明：:class="{‘alreadyChoose’:arr.includes(item)}" 意思是：
选中的数组 arr 包含此元素，class的样式为 alreadyChoose

css略

js：以下为vue3的语法

 const arr:Ref<Array> = ref([]);
 const goChooseAnneximagesClick: Function = (item): void => {
      if(arr.value.includes(item)){
        //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
        //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
        arr.value = arr.value.filter(function (ele){return ele != item;});
      }else{
        arr.value.push(item);
      }
      console.log(arr.value,"是arr.value")
    }