Le contenu de cet article explique comment Vue implémente les fonctions de sélection unique, de sélection multiple, de sélection inverse et de sélection totale (avec le code joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . J'espère que cela vous aidera.
Lorsque nous utilisons v-for pour restituer un ensemble de données, nous pouvons apporter un index pour les distinguer. Nous utilisons ici cet index pour simplement implémenter une sélection unique
<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(index)">{{item}}</li>
Cela équivaut à ce que chaque personne ait un numéro. Cliquer sur la souris génère un numéro gagnant, et ensuite chaque personne peut juger si le numéro gagnant est le sien. Si c'est le sien, wow, c'est incroyable~.
data() { return { selectedNum:"", radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"], }; }, methods: { //单选 select(i) { this.selectedNum = i; }, }
<li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?'active':''" @click="check(index)">{{item}}</li>
Le code est écrit en cliquant une fois pour pousser l'index une fois dans la case à cocher. Si l'index existe dans la case à cocher, alors vous n'en avez pas besoin. pour sélectionner, puis cliquez à nouveau pour annuler.
//多选 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); } } }
<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() } },
<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>单选框
<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(index)">{{item}}</li>
多选框
<li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?'active':''" @click="check(index)">{{item}}</li>
Utiliser vue pour implémenter la fonction de sélection de tout et de sélection inverse
Basé sur jQuery pour implémenter la fonction de sélection de tout, de désélection et d'inversion -sélectionner les fonctions de check boxes_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!