Bagaimana untuk melaksanakan fungsi mengklik untuk memilih senarai produk dalam vue

Saya sedang mengusahakan tapak web e-dagang baru-baru ini dan perlu melaksanakan fungsi mengklik untuk memilih senarai produk. Saya mengambil peluang ini untuk mempelajari rangka kerja Vue.

Dalam Vue, sangat mudah untuk mengklik pada senarai yang dipilih Anda hanya perlu menggunakan arahan v-on dan arahan v-bind yang disediakan oleh Vue.

Pertama, tentukan senarai produk dalam templat, dengan kotak pilihan di belakang setiap produk.

<ul>
  <li v-for="item in itemList">
    <input type="checkbox" v-bind:id="item.id" v-model="item.checked"/>
    <label v-bind:for="item.id">{{item.name}}</label>
  </li>
</ul>

Arahan v-for di sini ialah arahan gelung dalam Vue, yang digunakan untuk melintasi setiap elemen dalam tatasusunan itemList. Arahan v-bind ialah arahan mengikat atribut dalam Vue, yang boleh mengikat data dalam Vue ke elemen HTML. Arahan model v ialah arahan pengikatan dua hala dalam Vue, yang boleh mencapai penyegerakan dua hala data.

Dalam data, isytiharkan tatasusunan itemList dan mulakan id, nama dan atribut yang diperiksa bagi setiap elemen.

data() {
  return {
    itemList: [
      {
        id: 'item1',
        name: '商品1',
        checked: false
      },
      {
        id: 'item2',
        name: '商品2',
        checked: false
      },
      {
        id: 'item3',
        name: '商品3',
        checked: false
      }
    ]
  }
}

Apabila pengguna mengklik pada kotak pilihan, acara klik akan dicetuskan. Kami hanya perlu menentukan kaedah toggleCheck dalam kaedah untuk menyongsangkan status kotak pilihan yang sedang dipilih.

methods: {
  toggleCheck(item) {
    item.checked = !item.checked;
  }
}

Akhir sekali, gunakan arahan v-on dalam templat untuk mengikat acara klik dan panggil kaedah toggleCheck.

<input type="checkbox" v-bind:id="item.id" v-model="item.checked" v-on:click="toggleCheck(item)"/>

Dengan cara ini, anda boleh merealisasikan fungsi mengklik pada senarai yang dipilih.

Untuk meringkaskan, Vue sangat mudah untuk melaksanakan senarai klik untuk pilih Anda hanya perlu menggunakan arahan v-for, v-bind, v-model dan v-on yang disediakan oleh Vue untuk mengikat. data dalam HTML dan Vue Ditakrifkan, penyegerakan dua hala bagi data dan pengikatan peristiwa boleh dicapai. Rangka kerja Vue bukan sahaja kos rendah untuk dipelajari, tetapi juga sangat sesuai untuk membangunkan projek kecil dan sederhana. Jika anda juga ingin meningkatkan kemahiran bahagian hadapan anda, anda juga boleh mempelajari rangka kerja Vue!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi mengklik untuk memilih senarai produk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!