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.
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!