Hubungan antara semak kotak berbilang pilihan dan pilih semua fungsi dalam dokumen Vue

Dengan pembangunan berterusan dan kemajuan teknologi hadapan, aplikasi rangka kerja Vue menjadi semakin popular. Dalam aplikasi praktikal Vue, fungsi menyemak berbilang kotak pilihan dan memilih semua sering digunakan. Dalam dokumentasi Vue, kaedah pelaksanaan menyemak berbilang kotak pilihan dan memilih semua juga sangat terperinci.

Kotak berbilang pilihan dalam Vue

Dalam Vue, kaedah pelaksanaan kotak berbilang pilihan adalah sangat mudah Anda hanya perlu menggunakan <input type="checkbox"> di mana anda perlu menggunakan kotak berbilang pilihan . Apabila berbilang pilihan perlu dipilih, anda hanya perlu menetapkan nilai model v yang sama untuk setiap pilihan. Kod khusus adalah seperti berikut:

<div id="app">
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      checkedItems: []
    }
  })
</script>

Dalam kod di atas, kami menggunakan tatasusunan checkedItems untuk menyimpan nilai pilihan yang dipilih. Apabila pengguna menyemak pilihan, nilai pilihan itu ditambahkan pada tatasusunan checkedItems.

Pilih semua fungsi dalam dokumen Vue

Dalam dokumen Vue, ia juga menyediakan kami kaedah untuk merealisasikan pemilihan semua kotak berbilang pilihan. Kod khusus adalah seperti berikut:

<div id="app">
  <input type="checkbox" id="selectAll" v-model="allChecked" @change="checkAll">
  <label for="selectAll">Select all</label>
  <br>
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    checkedItems: [],
    allChecked: false
  },
  methods: {
    checkAll() {
      if (!this.allChecked) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    }
  }
})
</script>

Dalam kod di atas, kami menetapkan pembolehubah allChecked untuk kotak semua-pilih untuk menentukan sama ada semua dipilih. Dalam fungsi semakSemua, kami menggunakan dua cawangan untuk melaksanakan fungsi memilih semua dan menyahpilih semua: apabila semua pilihan dipilih, kotak semua pilih ditandakan secara automatik apabila mana-mana pilihan tidak dipilih, kotak semua pilih secara automatik menjadi tidak dipilih .

Hubungan antara semak kotak berbilang pilih dan pilih semua fungsi

Apabila melaksanakan semakan kotak berbilang pilih dan pilih semua fungsi dalam Vue, kita perlu memberi perhatian kepada isu yang sangat penting, iaitu : Kesan pada pilihan induk apabila pilihan anak disemak.

Apabila semua sub-pilihan dipilih, pilihan induk disemak secara automatik apabila terdapat sub-pilihan yang tidak dipilih, pilihan induk menjadi tidak ditandakan secara automatik.

Untuk melaksanakan fungsi ini, kami boleh mengemas kini status kotak semua yang dipilih secara dinamik dengan mendengar perubahan dalam tatasusunan checkedItems. Kod khusus adalah seperti berikut:

<div id="app">
  <input type="checkbox" id="selectAll" v-model="allChecked" @change="checkAll">
  <label for="selectAll">Select all</label>
  <br>
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems" @change="checkParent">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems" @change="checkParent">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems" @change="checkParent">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    checkedItems: [],
    allChecked: false
  },
  methods: {
    checkAll() {
      if (!this.allChecked) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    },
    checkParent() {
      if (this.checkedItems.length === this.items.length) {
        this.allChecked = true;
      } else {
        this.allChecked = false;
      }
    }
  }
})
</script>

Dalam kod di atas, kami menetapkan fungsi checkParent untuk sub-pilihan dan menambah @change event listening dalam v-model. Fungsi ini dipanggil apabila subopsyen ditukar. Dalam fungsi checkParent, kami menggunakan pernyataan if-else untuk menentukan sama ada pilihan induk perlu disemak.

Ringkasan

Dalam Vue, kaedah pelaksanaan untuk menyemak dan memilih semua berbilang kotak adalah sangat mudah Anda hanya perlu menggunakan arahan model-v dan pemantauan acara @change. Walau bagaimanapun, apabila melaksanakan kesan pada pilihan induk apabila pilihan anak disemak, kita perlu memantau perubahan dalam tatasusunan checkedItems untuk mengemas kini status kotak yang dipilih semua secara dinamik. Bagi pemula, ini mungkin mengambil sedikit masa untuk memahami dan menghadam. Walau bagaimanapun, selagi anda menguasai mata pengetahuan ini, ia menjadi sangat mudah untuk melaksanakan semakan kotak berbilang pilih dan memilih semua fungsi.

Atas ialah kandungan terperinci Hubungan antara semak kotak berbilang pilihan dan pilih semua fungsi dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!