Arahan v-show dalam Vue

Satu lagi pilihan untuk paparan bersyarat ialah arahan v-show. Ia digunakan dengan cara yang sangat serupa:

html<template>
  <p v-show="isAuth">
    +++
  </p>
</template>

Perbezaannya ialah elemen dengan v-show akan sentiasa di render dan kekal dalam DOM, dan hanya sifat CSS display-nya yang akan ditogol.

Arahan v-if melaksanakan rendering bersyarat "sebenar" kerana ia menjamin bahawa pendengar peristiwa dan komponen anak dalam blok dimusnahkan dan dicipta semula dengan betul apabila keadaan ditogol.

Arahan v-if juga malas: jika keadaannya adalah palsu pada masa rendering awal, ia tidak akan melakukan apa-apa - blok bersyarat tidak akan di render sehingga keadaan menjadi benar.

Sebagai perbandingan, v-show jauh lebih mudah - elemen sentiasa di render, tanpa mengira keadaan asal dengan penogolan berdasarkan CSS.

Secara umumnya, v-if mempunyai kos penogolan yang lebih tinggi, sementara v-show mempunyai kos rendering awal yang lebih tinggi. Jadi, gunakan v-show jika penogolan akan kerap dilakukan, dan utamakan v-if jika keadaan mungkin tidak berubah semasa runtime.