vue 选择之单选，多选，反选，全选，反选

Posted 2021-03-24 ning123

1、单选

当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选。

<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?‘active‘:‘‘" @click="select(index)">{{item}}</li>

首选定义一个selectedNum,当我们点击item时，便把这个selectedNum更改为我们所点击的item的index，然后每个item上加入判断selectedNum是不是等于自己，如果等于则选中。

代码如下：

data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
    };
  },
methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
  }

　　

2、多选

 

3、反选

4、全选

5、全不选