Petua untuk menggunakan v-show dan v-if untuk mengawal paparan dan menyembunyikan elemen dalam Vue

Mengawal paparan dan menyembunyikan elemen dalam Vue ialah keperluan yang sangat biasa, dan v-show dan v-if ialah dua arahan yang biasa digunakan dalam Vue untuk mencapai fungsi ini. Artikel ini akan memperkenalkan cara menggunakan kedua-dua arahan ini untuk mengawal paparan dan penyembunyian elemen, dan membincangkan cara memilih arahan yang hendak digunakan dalam pembangunan sebenar.

1. Penggunaan asas v-show

Dalam Vue, gunakan arahan v-show untuk mengawal paparan dan menyembunyikan elemen. Penggunaan v-show adalah sangat mudah Anda hanya perlu menambah arahan v-show pada elemen yang perlu dipaparkan dan disembunyikan, dan mengikatnya pada nilai Boolean. Sebagai contoh, gunakan kod berikut dalam templat:

<div v-show="show">
  我是要显示的元素
</div>

Antaranya, tunjukkan ialah pembolehubah jenis Boolean Dengan menukar nilai pembolehubah, anda boleh memaparkan dan menyembunyikan elemen. Ciri

v-show ialah ia tidak mengubah suai kewujudan atau ketiadaan elemen DOM, tetapi hanya memaparkan dan menyembunyikan elemen melalui kawalan gaya CSS. Oleh itu, apabila halaman dimuatkan, walaupun elemen disembunyikan, ia masih akan dimuatkan ke dalam DOM dan tidak akan menjejaskan kelajuan pemuatan halaman.

2. Penggunaan asas v-if

Berbeza daripada v-show, arahan v-if akan menentukan sama ada untuk memasukkan elemen ke dalam DOM berdasarkan nilai pembolehubah jenis Boolean. Apabila nilai pembolehubah adalah benar, elemen akan dimasukkan ke dalam DOM apabila nilai pembolehubah adalah palsu, elemen tidak akan dimasukkan ke dalam DOM. Oleh itu, v-if menjimatkan sumber DOM lebih daripada v-show, tetapi ia juga mempengaruhi kelajuan pemuatan halaman.

Kod untuk menggunakan arahan v-if dalam templat adalah seperti berikut:

<div v-if="show">
  我是要显示的元素
</div>

Begitu juga, di sini, show ialah pembolehubah jenis Boolean.

3. Pilihan antara v-show dan v-if

Dalam perkembangan sebenar, kita harus memilih untuk menggunakan v-show atau v-if mengikut senario yang berbeza.

1. Jika anda perlu kerap menukar paparan dan keadaan elemen tersembunyi, anda harus menggunakan v-show. Oleh kerana v-show hanya memaparkan dan menyembunyikan elemen dengan mengawal gaya CSS dan tidak membina semula DOM, menukar keadaan elemen adalah sangat pantas.
2. Jika elemen akan muncul sekali sahaja dalam halaman atau hanya dalam keadaan tertentu, gunakan v-if untuk mempunyai kawalan yang lebih baik ke atas pemuatan DOM. Kerana ciri v-if adalah untuk memasukkan elemen ke dalam DOM hanya apabila syarat dipenuhi, ia boleh mengelakkan pembaziran sumber DOM yang tidak perlu apabila elemen tidak perlu dipaparkan.
3. Jika anda perlu memaparkan semua elemen dengan cepat apabila halaman dimuatkan, anda harus menggunakan v-show. Dalam senario menggunakan v-if, memandangkan elemen hanya akan dimasukkan ke dalam DOM apabila syarat dipenuhi, halaman mungkin kosong untuk satu tempoh masa. Menggunakan v-show boleh memaparkan semua elemen dengan cepat apabila halaman dimuatkan.

4. Ringkasan

v-show dan v-if ialah arahan biasa dalam Vue untuk mengawal paparan dan menyembunyikan elemen. Melalui pengenalan artikel ini, anda boleh mendapati bahawa setiap dua arahan ini mempunyai kelebihan dan kekurangannya sendiri. Dalam pembangunan sebenar, kita harus memilih untuk menggunakan arahan yang berbeza mengikut senario yang berbeza untuk mencapai hasil yang optimum.

Atas ialah kandungan terperinci Petua untuk menggunakan v-show dan v-if untuk mengawal paparan dan menyembunyikan elemen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!