Rumah >hujung hadapan web >View.js >Apakah perbezaan antara v-show dan v-if dalam vuejs
Perbezaan: 1. "v-if" menambah atau memadam elemen DOM secara dinamik ke dalam pepohon DOM, "v-show" mengawal keterlihatan dengan menetapkan atribut gaya paparan elemen DOM 2. Proses penyusunan Berbeza 3 . Syarat kompilasi adalah berbeza; 4. Kos penukaran "v-if" adalah tinggi, kos pemaparan awal "v-show" adalah tinggi, dsb.
Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.
v-if
arahan dan v-show
arahan secara dinamik boleh mengawal paparan dan penyembunyian DOM
elemen berdasarkan pada nilai, v-if
dan v-show
adalah arahan dalaman yang biasa digunakan Vue
Tanggungjawab arahan adalah untuk menggunakan tingkah laku khas tertentu pada DOM
apabila nilai ungkapan berubah.
Penerangan Arahan
v-if
v-if
digunakan untuk membuat secara bersyarat Sekeping kandungan yang hanya akan dipaparkan apabila ungkapan arahan mengembalikan nilai truthy
. Penggunaan arahan
<div v-if="show">show</div> <div v-else>hide</div>
v-show
v-show
adalah lebih kurang sama, perbezaannya ialah elemen dengan arahan v-show
akan sentiasa dipaparkan dan dikekalkan dalam Dalam DOM
, v-show
hanya menukar CSS property display
elemen.
<div v-show="show">show</div>
Perbezaan
Kaedah pelaksanaan: v-if
ditambah secara dinamik pada pokok DOM
Atau padamkan elemen DOM
v-show
dikawal dengan menetapkan atribut gaya DOM
elemen display
.
Proses kompilasi: v-if
Penukaran mempunyai proses penyusunan dan pemunggahan separa Semasa proses pensuisan, pendengar acara dalaman dan sub-komponen dimusnahkan dan dibina semula dengan betul hanya berdasarkan v-show
Suis. CSS
malas, jika syarat awal palsu, jangan lakukan apa-apa dan hanya mulakan kompilasi separa apabila syarat menjadi benar buat kali pertama, v-if
ialah disusun di bawah semua keadaan dan kemudian dicache, dan elemen v-show
dikekalkan. DOM
mempunyai kos penukaran yang lebih tinggi, v-if
mempunyai kos pemaparan awal yang lebih tinggi. v-show
Sesuai untuk situasi di mana keadaan tidak mungkin berubah, v-if
Sesuai untuk situasi di mana keadaan sering bertukar. v-show
tutorial vue.js"
Atas ialah kandungan terperinci Apakah perbezaan antara v-show dan v-if dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!