Bagaimana untuk menambah elemen dalam vue

Vue ialah rangka kerja JavaScript popular yang menyediakan pembangun cara yang sangat mudah untuk membina UI interaktif dan sangat mudah untuk disepadukan ke dalam aplikasi sedia ada. Dalam Vue, menambah elemen juga merupakan operasi yang sangat biasa. Artikel ini akan memperkenalkan cara menambah elemen baharu dalam Vue.

Vue menyediakan arahan v-for yang sangat berkuasa untuk membantu kami merentasi tatasusunan, objek dan senarai. Jika kita ingin menambah elemen pada Vue, kita boleh melakukannya dalam langkah berikut:

Langkah 1: Tentukan tatasusunan atau objek untuk menyimpan elemen yang ingin kita tambah.

Kami boleh menggunakan pilihan data Vue untuk menentukan tatasusunan atau objek kosong.

data() {
  return {
    items: []
  }
}

Langkah 2: Tentukan butang atau pautan dalam templat untuk mencetuskan tindakan menambah elemen.

<button @click="addItem">Add Item</button>

Langkah 3: Tulis fungsi pemprosesan elemen tambahan dalam definisi komponen Vue dan ikatkannya pada peristiwa klik butang.

methods: {
  addItem() {
    const newItem = {
      name: 'New Item'
    }
    this.items.push(newItem);
  }
}

Dalam fungsi ini, kami mula-mula mentakrifkan elemen baharu newItem, dan kemudian menambahnya pada tatasusunan item yang kami takrifkan sebelum ini.

Langkah 4: Gunakan arahan v-for dalam templat untuk memaparkan elemen tambahan.

<ul>
  <li v-for="item in items" :key="item.name">{{ item.name }}</li>
</ul>

Di sini, kami menggunakan arahan v-for untuk menggelungkan setiap elemen dalam tatasusunan item dan menjadikannya item senarai, dan gunakan :key untuk mengikat nama item untuk mengelakkan amaran dibangkitkan oleh Vue.

Kini, kami telah berjaya menambahkan elemen dalam Vue. Setiap kali butang "Tambah Item" diklik, fungsi addItem kami akan dipanggil dan menambah elemen baharu pada tatasusunan item, yang akan dipaparkan sebagai item senarai dalam templat.

Ringkasan:

Vue ialah rangka kerja JavaScript yang sangat berkuasa dan popular, yang boleh membantu kami membina UI interaktif dengan mudah. Kita boleh menggunakan arahan v-for untuk mengulangi tatasusunan dan objek dan membuat senarai. Menggunakan Vue, kita boleh menambah elemen dengan mudah dengan mentakrifkan tatasusunan atau objek, kemudian menambah elemen pada tatasusunan atau objek dengan menambahkan fungsi pemprosesan elemen, dan akhirnya menggunakan arahan v-for untuk menjadikan elemen ke dalam templat.

Atas ialah kandungan terperinci Bagaimana untuk menambah elemen dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!