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.

Perbezaan antara v-if dan v-show

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-ifPenukaran 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

• Syarat kompilasi:

  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

• Penggunaan prestasi:

  mempunyai kos penukaran yang lebih tinggi, v-if mempunyai kos pemaparan awal yang lebih tinggi. v-show

• Senario penggunaan:

  Sesuai untuk situasi di mana keadaan tidak mungkin berubah, v-ifSesuai untuk situasi di mana keadaan sering bertukar. v-show

Cadangan berkaitan: "

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!