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

這篇文章帶給大家的內容是關於vue如何實現單選多選反選全選全不選的而功能（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

單選

當我們用v-for渲染一組資料的時候，我們可以帶上index以便區分他們我們這裡利用這個index來簡單地實現單選

<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?&#39;active&#39;:&#39;&#39;" @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)?&#39;active&#39;:&#39;&#39;" @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?&#39;取消全选&#39;:&#39;选择全部&#39;}}</button>

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

然後我們只需要給這個雙功能按鈕綁定一個這樣的功能即可

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

完整程式碼

<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&gt;-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>

相關推薦：

利用vue實作全選反選功能

基於jQuery實作複選框的全選 全不選 反選功能_jquery

#

以上是vue如何實現單選多選反選全選全不選的而功能（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！