场景：当需求在多个相同的items里面，点击的items变成选中的样式，其他的items恢复原来的模样

直接上代码

  <div class="container">
    <ul>
      <li v-for="(item,i) in showItem"
          :key="item.id"
          :class="['show-item',{active:i == actionIndex}]" 
          @click="handelActiveIndex(i)">选项1</li>
    </ul>
  </div>
1
2
3
4
5
6
7
8
export default {
  name:'showList',
  data() {
    actionIndex: 0 ,// 控制点亮状态,也是对应数组的下标
    showItem:[]
  },
  methods:{
    handelActiveIndex(index){// 点击添加类名删除同级类名的方法
      this.activeIndex = index;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  1. class名中 show-item是固定的, active是根据循环的下标(i)和选中更改的activeIndex对应为true才显示
  2. 渲染的li的下标如果跟改变的activeIndex下标一致 就是为true

TOC