数组中indexOf的功能

醉红梦颜

于 2021-05-21 19:53:28 发布

阅读量237

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_16495187/article/details/117134014

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个Vue实例，展示了如何利用`v-for`指令遍历列表，并结合`:class`和`@click`实现元素的选中和取消选中状态。通过`faultSelect`数组存储选中项，点击元素时检查该值是否已存在于数组中，如果存在则从数组中移除，反之则添加到数组。这种技巧常用于实现多选列表或选项卡组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是在vue中的使用

<div
  class="CreateTask-fault-moder"
  v-for="(its, indexs) in AllTaskName"
  :key="indexs"
  :class="{'CreateTask-fault-active': faultSelect.indexOf(its)!=-1}"
  @click="GetClassfaultData(its,indexs)"
>

js代码

 var = faultSelect=[],
 GetClassfaultData(value){
      //在数组传递一个对象,然后判断是否有这个对象，没有这个对象就返回-1
      if (this.faultSelect.indexOf(value) !== -1) {
        this.faultSelect.splice(this.faultSelect.indexOf(value), 1); //取消
      }else{
        this.faultSelect.push(value);//选中添加到数组里
      }
    },