vue实现单选多选反选全选全不选

单选

当咱们用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;
    },
  }

多选

多选的原理和单选同样，只不过此次咱们要维护的是一个数组，不是单个的selectedNum

<li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?'active':''" @click="check(index)">{{item}}</li>

一样是利用index~一样是选中奖的人，不过此次中奖的人不少，咱们点击一次就有一我的中奖，若是这我的的index出如今咱们的中奖名单checkbox上，那他就是天选之人了~
写成代码就是点击一次push一次index到checkbox中，若是这个checkbox中有这个index了那就不要它了，实现了点一次选中再点一次取消。

//多选
    check(i){
      var idx = this.checkbox.indexOf(i);
      //若是已经选中了，那就取消选中，若是没有，则选中
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    },

接下来咱们写一下全选，全取消，反选的实现。

//选中所有
checkAll(){
    //中奖的人就这么多，并且他们的index都是0到length-1的（v-for渲染），一顿数组基本操做便可
    var len = this.checkboxList.length;
    this.checkbox = [];
    for(var i=0;i<len;i++){
      this.checkbox.push(i);
    }
  },
//清空选择
clearCheckbox(){
  this.checkbox = [];
  },
//反选
checkOpposite(){
    var len = this.checkboxList.length;
    var idx;
    for(var i=0;i<len;i++){
      idx = this.checkbox.indexOf(i)
      //已经选中的删去，没选中的加进去
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    }
  }

不少时候 全选 和 所有取消 只要一个按钮实现，这样咱们就须要来判断它是否是已经所有选满了。在computed中自动计算是否全选。

<button @click="letsGetThisFuckingCheck">{{isCheckAll?'取消全选':'选择所有'}}</button>

computed: {
    //判断是否所有选中
    isCheckAll(){
      if(this.checkbox.length==this.checkboxList.length){
        return true;
      }
      return false;
    }
  },

而后咱们只须要给这个双功能按钮绑定一个这样的功能便可

letsGetThisFuckingCheck(){
//若是全选，就是清空选择；若是不是，那就全都安排一下
      if(this.isCheckAll){
        this.clearCheckbox();
      }else{
        this.checkAll()
      }
    },

展现

上gif演示图（伪装这个是gif，其实大家能想象的出来什么效果的吧）

完整代码

<template>
  <div>
    <p>单选框</p>
    <ul>
      <li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(index)">{{item}}</li>
    </ul>

    <p>多选框</p>
    <ul>
      <li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?'active':''" @click="check(index)">{{item}}</li>
    </ul>
    <button @click="letsGetThisFuckingCheck">{{isCheckAll?'取消全选':'选择所有'}}</button>
    <button @click="checkOpposite">反选</button>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
      checkbox:[],
      checkboxList:["某个元素", "某个元素", "某个元素", "某个元素", "某个元素","某个元素", "某个元素"],
    };
  },

  computed: {
    //判断是否所有选中
    isCheckAll(){
      if(this.checkbox.length==this.checkboxList.length){
        return true;
      }
      return false;
    }
  },

  methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
    //多选
    check(i){
      var idx = this.checkbox.indexOf(i);
      //若是已经选中了，那就取消选中，若是没有，则选中
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    },
    
    letsGetThisFuckingCheck(){
      if(this.isCheckAll){
        this.clearCheckbox();
      }else{
        this.checkAll()
      }
    },
    //选中所有
    checkAll(){
      var len = this.checkboxList.length;
      this.checkbox = [];
      for(var i=0;i<len;i++){
        this.checkbox.push(i);
      }
    },
    //清空选择
    clearCheckbox(){
      this.checkbox = [];
    },
    //反选
    checkOpposite(){
      console.log(1)
      var len = this.checkboxList.length;
      var idx;
      for(var i=0;i<len;i++){
        idx = this.checkbox.indexOf(i)
        //已经选中的删去，没选中的加进去
        if(idx>-1){
          this.checkbox.splice(idx,1);
        }else{
          this.checkbox.push(i);
        }
      }
    }
  }
};
</script>
<style scoped>
li{
  display: inline-block;
  font-size: 16px;
  padding: 5px;
  background-color: #e6e6e6;
  margin: 5px 10px;
  cursor: pointer;
}
.active {
  border: 2px solid red;
}
</style>