How Vue implements a single-choice, multi-Select, all-in-one selection with a feature (code attached)

This article brings to you the content is about Vue how to achieve a single selection of multi-Select all-in-one selection and the function (with code), there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

Radio

When we use V-for to render a set of data, we can take the index to differentiate them we use this index here to simply implement a single selection

<li v-for= "(item,index) in radiolist": key= "index": class= "Selectednum==index?" Active ': ' "@click =" SELECT (index) >{{item}}</li>

Preferred to define a selectednum, when we click on the item, we change this selectednum to the index of the item we clicked on, then each item is added to determine if selectednum is equal to itself, if equal is selected.
Equivalent to each person has a number, mouse click generated a winning number, and then everyone himself to determine whether the winning number is their own, if it is their own, wow, no ~

The code is as follows:

Data () {    return {      selectednum: "",      radiolist: ["An Element", "an Element", "an Element", "an Element", "an Element"],    };  }, Methods: {    //Radio    Select (i) {      this.selectednum = i;    },  }

Multi-Select

The principle of multi-choice is the same as the single, but this time we want to maintain an array, not an individual selectednum

<li v-for= "(item,index) in CheckBoxList": key= "item": class= "Checkbox.includes (index)?" Active ': ' "@click =" Check (index) >{{item}}</li>

The same is the use of index~ is also the winner of the award, but this time a lot of people, we click on one of the People award, if the person's index appears on our winning list checkbox, then he is the chosen person ~
Write the code is to click on the push once index into the checkbox, if the checkbox has this index, then do not have it, to achieve the point of a check and then click Cancel.

Multi-Select    Check (i) {      var idx = this.checkbox.indexOf (i);      If it is already selected, uncheck it and if not, select if      (idx>-1) {        this.checkbox.splice (idx,1);      } else{        This.checkbox.push (i);      }    },

Next we write a full selection, completely cancel, reverse the implementation of the election.

Select All Checkall () {    //winners are so much, and their index is 0 to length-1 (v-for rendering), an array of basic operations can be    var len = This.checkboxList.length;    This.checkbox = [];    for (Var i=0;i<len;i++) {      this.checkbox.push (i);    }  },//Clear Select Clearcheckbox () {  this.checkbox = [];  } ,//Counter-select Checkopposite () {    var len = this.checkboxList.length;    var idx;    for (Var i=0;i<len;i++) {      idx = this.checkbox.indexOf (i)      //deleted by selected, unchecked add in      if (idx>-1) {        This.checkbox.splice (idx,1);      } else{        This.checkbox.push (i);}}  

Most of the time, all-in and all cancellations are implemented as a single button, so we need to determine if it's all full. Automatically calculates whether to select all in computed.

<button @click = "Letsgetthisfuckingcheck" >{{ischeckall? ' Deselect all ': ' Select All '}}</button>computed: {    //determine if all    Ischeckall () {      if (this.checkbox.length== This.checkboxList.length) {        return true;      }      return false;    }  ,

And then we just need to give this dual-function button A function like this.

Letsgetthisfuckingcheck () {//If all is selected, clear the selection, if not, then all arrange if      (this.ischeckall) {        this.clearcheckbox ();      } else{        This.checkall ()      }    },

Full code

<template> <div> <p> Single box </p> <ul> <li v-for= "(item,index) in radiolist": key= " Index ": class=" Selectednum==index? Active ': ' @click = Select (Index) >{{item}}</li> </ul> <p> Multi box </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" & Gt {{Ischeckall? ' Deselect all ': ' Select All '}}</button> <button @click = ' checkopposite ' > Reverse </button> </div></template ><script>export Default {components: {}, data () {return {selectednum: "", Radiolist: ["An Element", "a Elements "," an Element "," an Element "," an Element "], checkbox:[], checkboxlist:[" an element "," an Element "," an Element "," an Element "," an Element "," an Element "," an element "  ,    }; }, computed: {//Determine whether to select All Ischeckall () {if (this.checkbox.length==this.checkboxlist.length) {return true      ;  }    return false;    }}, methods: {//Radio Select (i) {this.selectednum = i;      },//Multi-select Check (i) {var idx = this.checkbox.indexOf (i);      If it is already selected, uncheck it and if not, select if (idx>-1) {this.checkbox.splice (idx,1);      }else{This.checkbox.push (i);      }}, Letsgetthisfuckingcheck () {if (This.ischeckall) {this.clearcheckbox ();      }else{This.checkall ()}},//Select All Checkall () {var len = this.checkboxList.length;      This.checkbox = [];      for (Var i=0;i<len;i++) {This.checkbox.push (i);    }},//Clear Select Clearcheckbox () {this.checkbox = [];      },//Counter-select Checkopposite () {console.log (1) var len = this.checkboxList.length;      var idx; for (Var i=0;i<len;i++) {idx = this.checkbox.indexOf (i)//deleted by selected, unchecked add in if (idx>-1) {T        His.checkbox.splice (idx,1);        }else{This.checkbox.push (i); }}}}};&LT;/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>