Wie implementiert Vue die Funktionen Einzelauswahl, Mehrfachauswahl, inverse Auswahl aller und keine Auswahl aller (mit Code)?

Der Inhalt dieses Artikels befasst sich mit der Implementierung der Einzelauswahl-, Mehrfachauswahl-, Umkehrauswahl- und Alle-Auswahl-Funktionen (mit angehängtem Code). Freunde in Not können sich darauf beziehen . Ich hoffe, es wird Ihnen helfen.

Radioauswahl

Wenn wir v-for zum Rendern eines Datensatzes verwenden, können wir einen Index zur Unterscheidung verwenden. Wir verwenden diesen Index hier, um einfach eine Einzelauswahl zu implementieren

0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb

Die erste Möglichkeit besteht darin, eine selectedNum zu definieren. Wenn wir auf das Element klicken, ändern wir die selectedNum in den Index des Elements, auf das wir geklickt haben, und fügen dann eine Beurteilung zu jedem Element hinzu, um zu bestimmen, ob die selectedNum mit sich selbst übereinstimmt es ist gleich, wählen Sie es aus.
Es ist gleichbedeutend damit, dass jede Person eine Gewinnzahl hat, und dann kann jede Person beurteilen, ob die Gewinnzahl ihre eigene ist, wow, das ist erstaunlich

Der Code lautet wie folgt:

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

Mehrfachauswahl

Das Prinzip der Mehrfachauswahl ist das gleiche wie das der Einzelauswahl, außer dass wir dieses Mal eine beibehalten möchten Array, kein einziges selectedNum

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

Der gleiche Index wird verwendet. Dieselbe Person wird für den Preis ausgewählt, aber dieses Mal gibt es viele Gewinner. Wir klicken einmal und eine Person gewinnt Wenn der Index in der Checkbox vorhanden ist, ist er der Auserwählte.
Der Code wird durch Klicken in die Checkbox geschrieben einmal zum Auswählen und dann erneut zum Abbrechen klicken.

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

Als nächstes schreiben wir über die Implementierung von „Alles auswählen“, „Alles aufheben“ und „Umkehren der Auswahl“.

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

Oft ist nur eine Schaltfläche erforderlich, um alles auszuwählen und alles abzubrechen. Daher müssen wir beurteilen, ob alles vollständig ausgewählt wurde. Berechnen Sie automatisch, ob alles in der Berechnung ausgewählt werden soll.

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

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

Dann müssen wir nur noch eine solche Funktion an diese Doppelfunktionstaste binden

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

Vollständiger Code

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

Verwandte Empfehlungen:

Verwenden Sie Vue, um die Funktionen „Alles auswählen“ und „Auswahl invertieren“ zu implementieren

Basierend auf jQuery, um die Funktionen „Alles auswählen“, „Auswahl aufheben“ und „Auswahl invertieren“ von checkboxes_jquery zu implementieren

Das obige ist der detaillierte Inhalt vonWie implementiert Vue die Funktionen Einzelauswahl, Mehrfachauswahl, inverse Auswahl aller und keine Auswahl aller (mit Code)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!