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>