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

<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?&#39;active&#39;:&#39;&#39;" @click="select(index)">{{item}}</li>

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

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.

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

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

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

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!