How does vue implement the function of single selection, multiple selection, inverse selection of all, and no selection of all (with code)-JS Tutorial-php.cn

How does vue implement the function of single selection, multiple selection, inverse selection of all, and no selection of all (with code)

不言

Release： 2018-09-08 17:50:08

Original

7977 people have browsed it

The content of this article is about how vue implements the single-select, multiple-select, inverse-select, and select-all functions (with code attached). It has certain reference value. Friends in need can refer to it. I hope It will help you.

Radio selection

When we use v-for to render a set of data, we can bring index to distinguish them. We use this index here to simply implement radio selection

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

Copy after login

The first choice is to define a selectedNum. When we click on the item, we change the selectedNum to the index of the item we clicked, and then add a judgment to each item to determine whether the selectedNum is equal to itself. If it is equal, it is selected.
Equivalent to each person having a number. Clicking the mouse generates a winning number, and then each person can judge whether the winning number is his or her own. If it is his or her own, wow, that’s incredible~

The code is as follows:

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

Copy after login

Multiple selection

The principle of multi-selection is the same as that of single selection, except that this time we want to maintain an array, not a single selectedNum

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

Copy after login

The same is used index~ The same person is selected for the prize, but this time there are many winners. We click once and one person will win. If this person's index appears on our winner list checkbox, then he is the chosen one~
The code is written by clicking once to push and once to index into the checkbox. If there is an index in the checkbox, then do not need it. This achieves clicking once to select and then clicking again to cancel.

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

Copy after login

Next, let’s write about the implementation of selecting all, canceling all, and inverse selection.

//选中全部
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);
      }
    }
  }

Copy after login

Many times, only one button is needed to select all and cancel all, so we need to judge whether it has been fully selected. Automatically calculate whether to select all in computed.

<button @click="letsGetThisFuckingCheck">{{isCheckAll?&#39;取消全选&#39;:&#39;选择全部&#39;}}</button>

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

Copy after login

Then we only need to bind such a function to this dual-function button

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

Copy after login

Complete code



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

Copy after login

Related recommendations:

Use vue to implement the select all and inverse selection function

## Based on jQuery to implement the all selection, none selection and inverse selection function of the check box_jquery

The above is the detailed content of How does vue implement the function of single selection, multiple selection, inverse selection of all, and no selection of all (with code). For more information, please follow other related articles on the PHP Chinese website!