Maison > interface Web > js tutoriel > le corps du texte

Comment vue implémente-t-il la fonction de sélection unique, de sélection multiple, de sélection inverse de tous et d'absence de sélection de tous (avec code)

不言
Libérer: 2018-09-08 17:50:08
original
7919 Les gens l'ont consulté

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.

Sélection radio

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?&#39;active&#39;:&#39;&#39;" @click="select(index)">{{item}}</li>
Copier après la connexion
Le premier choix est de définir un selectedNum Lorsque nous cliquons sur l'élément, nous remplaçons le selectedNum par l'index de l'élément sur lequel nous avons cliqué, puis ajoutons un jugement à chaque élément pour déterminer si le selectedNum est égal à lui-même. . S'il est égal, il est sélectionné.

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

Le code est le suivant :

data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
    };
  },
methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
  }
Copier après la connexion
Sélection multiple

Le principe de la multi-sélection est le même que celui de la sélection unique, sauf que cette fois il faut maintenir un tableau, pas un seul numéro sélectionné

<li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?&#39;active&#39;:&#39;&#39;" @click="check(index)">{{item}}</li>
Copier après la connexion
L'index est également utilisé pour sélectionner le gagnant, mais cette fois il y a plusieurs gagnants On clique une fois et une personne gagnera si l'index de cette personne apparaît dessus. notre case à cocher de la liste des gagnants, alors il est l'élu. ~

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);
      }
    },
Copier après la connexion
Ensuite, nous écrivons sur la mise en œuvre de la sélection de tout, de l'annulation de tout et de la sélection inverse.

//选中全部
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);
      }
    }
  }
Copier après la connexion
Souvent, un seul bouton est nécessaire pour tout sélectionner et tout annuler, nous devons donc juger s'il a été entièrement sélectionné. Calcule automatiquement s'il faut tout sélectionner dans le calcul.

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

computed: {
    //判断是否全部选中
    isCheckAll(){
      if(this.checkbox.length==this.checkboxList.length){
        return true;
      }
      return false;
    }
  },
Copier après la connexion
Ensuite, il suffit de lier une telle fonction à ce bouton à double fonction

letsGetThisFuckingCheck(){
//如果全选,就是清空选择;如果不是,那就全都安排一下
      if(this.isCheckAll){
        this.clearCheckbox();
      }else{
        this.checkAll()
      }
    },
Copier après la connexion
Code complet



<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>
Copier après la connexion
Recommandations associées :

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal