Cara vue melaksanakan paparan dan penyembunyian elemen (bandingkan v-if dan v-show)

Vue.js ialah rangka kerja progresif untuk mencipta antara muka pengguna. Terdapat banyak ciri lanjutan dalam Vue, salah satunya ialah menunjukkan dan menyembunyikan elemen. Prinsip pelaksanaan fungsi ini sebenarnya sangat mudah, tetapi ramai pemula Vue mungkin keliru.

1. arahan v-if

Cara paling asas untuk memaparkan dan menyembunyikan elemen dalam Vue ialah menggunakan arahan v-if. Arahan v-if memerlukan penambahan syarat pada elemen untuk disembunyikan atau dipaparkan Elemen akan dipaparkan hanya apabila syarat itu benar, jika tidak, ia akan disembunyikan. Contohnya:

<div v-if="show">这是一个需要显示或隐藏的元素</div>

Dalam contoh di atas, kami menentukan pembolehubah yang dipanggil show. Elemen div ini hanya akan dipaparkan apabila nilai persembahan adalah benar. Jika nilai persembahan adalah palsu, elemen ini akan disembunyikan.

2. arahan v-show

Selain arahan v-if, terdapat juga arahan dalam Vue untuk menunjukkan dan menyembunyikan elemen, iaitu v-show arahan. Tidak seperti arahan v-if, v-show tidak mengalih keluar elemen daripada DOM, tetapi menetapkan paparan sifat CSS elemen kepada tiada, supaya elemen itu tidak akan dipaparkan pada halaman.

Contohnya:

<div v-show="show">这是一个需要显示或隐藏的元素</div>

Dalam contoh di atas, jika nilai show adalah benar, elemen div akan dipaparkan pada halaman dan nilai paparan ditetapkan untuk menyekat; jika Jika nilai persembahan adalah palsu, elemen div tidak akan dipaparkan pada halaman dan nilai paparan adalah tiada.

Adalah penting untuk ambil perhatian bahawa apabila kita menggunakan arahan v-show, elemen itu masih terletak dalam DOM. Ini bermakna ia masih mengambil ruang pada halaman. Oleh itu, jika anda perlu mengalih keluarnya sepenuhnya pada halaman, anda harus menggunakan arahan v-if.

3. Bandingkan arahan v-if dan v-show

Prinsip pelaksanaan arahan v-if dan v-show telah diperkenalkan secara ringkas di atas. Tetapi apabila kita perlu menambah menunjukkan atau menyembunyikan fungsi pada elemen, arahan yang manakah harus kita pilih?

Pertama sekali, jika anda perlu menyembunyikan atau menunjukkan elemen tertentu secara bersyarat apabila dokumen dimuatkan, anda harus menggunakan arahan v-if. Ini kerana arahan v-if mengalih keluar elemen daripada DOM, jadi ia tidak mengambil ruang halaman seperti arahan v-show. Oleh itu, jika anda perlu menambah beberapa logik permulaan yang kompleks apabila halaman dimuatkan, menggunakan arahan v-if adalah pilihan yang baik.

Kedua, jika anda perlu menunjukkan dan menyembunyikan elemen beberapa kali, anda harus menggunakan arahan v-show. Ini kerana menggunakan arahan v-show boleh mengelak daripada mencipta semula dan memusnahkan elemen berulang kali, yang akan menyebabkan halaman dilukis semula dan menjejaskan prestasi.

Akhir sekali, apabila kita perlu membuat pertimbangan bersyarat apabila menggunakan v-if atau v-show, kita harus menggunakan ungkapan logik kedua-dua arahan ini untuk membuat pertimbangan bersyarat. Dengan cara ini, kami boleh menggunakannya secara fleksibel dalam kod kami dan menulis aplikasi Vue yang lebih fleksibel dan berkuasa.

Ringkasan:

Sangat mudah untuk menunjukkan dan menyembunyikan elemen dalam Vue. Kita hanya perlu menggunakan arahan v-if atau v-show untuk mencapai ini. Jika anda perlu menyembunyikan atau menunjukkan elemen tertentu semasa dokumen sedang dimuatkan, anda harus menggunakan arahan v-if. Jika anda perlu menunjukkan dan menyembunyikan elemen beberapa kali, anda harus menggunakan arahan v-show. Apabila menggunakan kedua-dua arahan ini, kita harus menggunakan ungkapan logik kedua-dua arahan ini untuk pertimbangan bersyarat, supaya kita boleh menggunakannya secara fleksibel dalam kod dan menulis aplikasi Vue yang lebih fleksibel dan berkuasa.

Atas ialah kandungan terperinci Cara vue melaksanakan paparan dan penyembunyian elemen (bandingkan v-if dan v-show). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!