Vue implementiert die vollständige Auswahlfunktion

<Vorlage>
  <div>
    <span>Alles auswählen:</span>
    <input type="checkbox" v-model="istAlles" />
    <button @click="btn">Invertieren</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input Typ="Kontrollkästchen" v-Modell="obj.c" />
        <span>{{ Objektname }}</span>
      </li>
    </ul>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      arr: [
        {
          Name: "Zhu Bajie",
          c: falsch,
        },
        {
          Name: "Sun Wukong",
          c: falsch,
        },
        {
          Name: "Tang Mönch",
          c: falsch,
        },
        {
          Name: "Weißes Drachenpferd",
          c: falsch,
        },
      ],
    };
  },
  berechnet: {
    istAlles: {
      //Alles auswählen, um die kleine Auswahl zu beeinflussen set(val) {
        //set(val) setzt den Status aller Auswahlen (true/false)
        //Wir legen den Status des vollständigen Auswahlfelds manuell fest und iterieren dann durch die c-Eigenschaft jedes Objekts im Array, d. h. wir iterieren durch den Status jedes kleinen Auswahlfelds und ändern seinen Status in val, den Status des vollständigen Auswahlfelds this.arr.forEach((obj) => (obj.c = val));
      },
      //Das kleine Auswahlfeld beeinflusst das große Auswahlfeld get() {
        // Beurteilen Sie, ob die c-Eigenschaft jedes Objekts im Array gleich true ist, dh beurteilen Sie den Status jedes kleinen Auswahlfelds. Solange der Status eines kleinen Auswahlfelds nicht true ist, wird es nicht aktiviert und dann false zurückgegeben, und der Status aller Auswahlfelder ist false
        // jede Formel: Suche die Bedingung „nicht erfüllt“ im Array und gib direkt an Ort und Stelle „false“ zurück
        gib dies zurück.arr.every((obj) => obj.c === true);
      },
    },
  },
  Methoden: {
    btn() {
      //Inverse Auswahl implementieren//Jedes Element im Array durchlaufen, das c-Attribut des Objekts im Array invertieren und es zurückzuweisen this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</Skript>