Bagaimana untuk melaksanakan pemadaman aktif senarai dalam Vue

Vue ialah rangka kerja JavaScript yang sangat popular yang membolehkan kami membina aplikasi web dengan mudah. Antaranya, ciri utama Vue ialah keupayaan pengurusan senarainya dalam halaman, membolehkan kami membuat dan mengurus sejumlah besar data dengan mudah. Walau bagaimanapun, dalam operasi sebenar, anda mungkin menghadapi situasi di mana anda perlu memadamkan senarai secara aktif. Artikel ini akan memperkenalkan cara melaksanakan pemadaman aktif senarai dalam Vue.

1. Penyampaian senarai Vue

Penyampaian senarai Vue ialah ciri hebat Vue yang membolehkan kami memaparkan data ke dalam senarai halaman tanpa menulis kod templat secara manual. Seterusnya, mari lihat cara menggunakan pemaparan senarai Vue:

Pepandangan senarai Vue boleh dilakukan dengan arahan v-untuk yang mudah, yang serupa dengan struktur gelung for yang biasa digunakan dalam JavaScript. Dalam Vue, semua data dalam tatasusunan boleh diberikan ke halaman melalui arahan v-for.

Sebagai contoh, katakan kita mempunyai data senarai seperti berikut:

data: {
  list: ['苹果', '香蕉', '橙子']
}

Kita boleh menggunakan arahan v-for Vue untuk memaparkannya ke halaman seperti berikut:

<ul>
  <li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>

Di sini, arahan v-for akan merentasi data senarai dan menjadikan setiap item senarai menjadi elemen

Arahan v-for mengandungi dua parameter dalam kurungan: item ialah nilai item senarai semasa dan indeks ialah indeks item senarai semasa.

2. Vue memadamkan senarai secara aktif

Untuk situasi di mana senarai Vue perlu dipadamkan, kami boleh melakukannya melalui langkah berikut:

1. Tentukan a kaedah

Kita perlu menentukan kaedah dalam objek Vue yang akan memadamkan item yang ditentukan dalam senarai. Sebagai contoh, kod berikut melaksanakan kaedah untuk memadam item tertentu dalam senarai:

methods: {
  removeItem: function (index) {
    this.list.splice(index, 1);
  }
}

Dalam kaedah padam, kami menggunakan list.splice(index, 1) untuk memadam elemen pada indeks yang ditentukan daripada senarai. Parameter pertama kaedah splice ialah indeks elemen yang akan dipadamkan, dan parameter kedua ialah bilangan elemen yang akan dipadamkan.

2. Panggil kaedah padam

Kita boleh menggunakan arahan v-on dalam templat untuk memanggil kaedah padam. Sebagai contoh, kod berikut akan memanggil kaedah removeItem apabila pengguna mengklik pada item senarai:

<ul>
  <li v-for="(item, index) in list" :key="index" v-on:click="removeItem(index)">{{item}}</li>
</ul>

Dalam kod ini, kami telah menambah arahan v-on untuk memanggil kaedah removeItem. Apabila pengguna mengklik pada item senarai, arahan v-on memanggil kaedah removeItem, menghantar indeks item senarai sebagai parameter kepada kaedah tersebut.

3. Animasi senarai Vue

Selain memadamkan senarai secara aktif dalam Vue, kami juga boleh meningkatkan pengalaman pengguna senarai dengan menambahkan animasi peralihan. Vue menggunakan peralihan dan animasi untuk mentakrifkan animasi peralihan.

1. Peralihan CSS

Kami boleh mentakrifkan kesan peralihan CSS dalam helaian gaya CSS seperti berikut:

.list-enter-active, .list-leave-active {
  transition: opacity .5s;
}
.list-enter, .list-leave-to{
  opacity: 0;
}

Di sini, kami mentakrifkan kelas A senarai bernama mengandungi dua subkelas: list-enter dan list-leave-to. Kelas ini digunakan secara automatik untuk menyenaraikan item apabila ia dimasukkan atau dipadamkan.

2. Menggunakan elemen

Kami boleh menggunakan animasi peralihan pada senarai menggunakan elemen Contohnya, kod berikut akan menambah kesan animasi peralihan pada senarai:

<ul>
  <transition name="list">
    <li v-for="(item, index) in list" :key="index" v-on:click="removeItem(index)">{{item}}</li>
  </transition>
</ul>

Di sini, kami membalut teg

yang kami gunakan sebelum ini secara langsung dalam elemen Kemudian, kami mentakrifkan kesan peralihan bernama senarai dalam helaian gaya CSS dan menerapkannya pada elemen

Kesan terakhir ialah apabila kami memadamkan item senarai, item tersebut hilang dari halaman secara beransur-ansur, dan bukannya hilang serta-merta.

Kesimpulan

Dengan menggunakan Vue, kami boleh memaparkan dan mengurus sejumlah besar data dengan mudah dan secara proaktif mengalih keluar item daripada senarai dengan menentukan kaedah. Selain itu, kami boleh meningkatkan pengalaman pengguna senarai dengan menambahkan peralihan CSS dan menggunakan elemen Saya harap artikel ini dapat membantu anda, jika anda mempunyai sebarang pertanyaan atau maklum balas, sila tinggalkan di ruangan komen.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemadaman aktif senarai dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!