vue如何?單選多選反選全選全不選的而功能（附代碼）

本篇文章給大家帶來的內容是關於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()      }    },

完整代碼

<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>