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)

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

0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb

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;
    },
  }

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>

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);
      }
    },

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;i311cd1cb4c7f915bb77f171abfb1a2fc-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    }
  }

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.

c93d9d746228ad54d582b9b52a1546f4{{isCheckAll?'取消全选':'选择全部'}}65281c5ac262bf6d81768915a4a77ac0

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

Ensuite, il suffit de lier une telle fonction à ce bouton à double fonction

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

Code complet

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    e388a4556c0f65e1904146cc1a846bee单选框94b3e26ee717c64999d7867364b1b4a3
    ff6d136ddc5fdfeffaf53ff6ee95f185
      0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689

    e388a4556c0f65e1904146cc1a846bee多选框94b3e26ee717c64999d7867364b1b4a3
    ff6d136ddc5fdfeffaf53ff6ee95f185
      37d349a997ba060025b794f498115081{{item}}bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    c93d9d746228ad54d582b9b52a1546f4{{isCheckAll?'取消全选':'选择全部'}}65281c5ac262bf6d81768915a4a77ac0
    79162f310a08887208df5d3e33f513a3反选65281c5ac262bf6d81768915a4a77ac0
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
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;i363dfbc6f5fc95588c3de13971e480d8-1){
          this.checkbox.splice(idx,1);
        }else{
          this.checkbox.push(i);
        }
      }
    }
  }
};
2cacc6d41bbb37262a98f745aa00fbf0
c977fa5678fe78cf54b097005108eb8c
li{
  display: inline-block;
  font-size: 16px;
  padding: 5px;
  background-color: #e6e6e6;
  margin: 5px 10px;
  cursor: pointer;
}
.active {
  border: 2px solid red;
}
531ac245ce3e4fe3d50054a55f265927

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!