vue中v-for指令循环每一个item，点击时选中，再次点击不选中，点击其他item时互斥_v-for-item

项目场景：

提示：这里简述项目相关背景：

例如：项目场景：通过v-for循环出来的每一个item项 ，当点击当前item时加上选中样式，当再次点击时去掉选中样式，点击其他item时该item选中并加上样式而上一个选中的item不选中去掉样式

---

解决方案：

vue 的data中新定义两个变量 ，current、isActive,如下

   currentModel:null,
   isActiveModel:false
1
2

当点击当前item时，判断当前的点击事件传来index（当前item的索引值）是否等于current ，如果相等再判断isActive是否为true，如果为true ，isActive为false，如果是false则为true。如果index不等于current ，isActive为true。然后使index等于current。代码如下

• html部分

<div class="model-item" v-for="(item,index) in modelList" @click="chooseBlogModel(item,index)">
                 <div class="public-model" v-show="!modelParams.type" >
                   <h2 class="c-title" v-text="item.title"></h2>
                   <img :src="item.img" alt="">
                   <div class="c-time">更新于
                     <span v-date="item.updateTime"> </span>前
                   </div>
                 </div>
                 <div class="private-model" v-show="modelParams.type">
                   <h2 class="e-title" v-text="item.title"></h2>
                   <div class="my-model" v-html="item.content"></div>
                   <div class="e-time">
                     <div>更新于 <span v-date="item.updateTime"></span>前</div>
                     <div>
                       <span class="el-icon-edit" @click.stop="toEditBlogModel(item.id)"></span>
                       <span class="el-icon-delete" v-show="item.type" @click.stop="deleteBlogModel(item.id,index)"></span>
                     </div>
                   </div>
                 </div>
                 <div class="mode" v-show="currentModel===index&&isActiveModel">
                   <span class="el-icon-check"></span>
                 </div>
               </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• js部分

 //选择模板
          chooseBlogModel(item,index){
            if(this.currentModel===index){
              this.isActiveModel = !this.isActiveModel;
            }else {
              this.isActiveModel=true
            }
            this.currentModel=index
    
          },
1
2
3
4
5
6
7
8
9
10