Direktif v-show di Vue

Opsi lain untuk menampilkan konten secara kondisional adalah direktif v-show. Penggunaannya sangat mirip:

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

Perbedaannya adalah elemen dengan v-show akan selalu di-render dan tetap berada di DOM, yang berubah hanyalah properti CSS display-nya.

Direktif v-if melakukan rendering kondisional yang "sebenarnya" karena ia memastikan bahwa pendengar acara (event listeners) dan komponen turunan di dalam blok dihancurkan dan dibuat ulang dengan benar saat kondisi berubah.

Direktif v-if juga bersifat malas (lazy): jika kondisinya salah pada saat rendering awal, maka ia tidak akan melakukan apa pun - blok kondisional tidak akan di-render sampai kondisinya menjadi benar.

Sebagai perbandingan, v-show jauh lebih sederhana - elemen selalu di-render, terlepas dari kondisi awal, dengan peralihan berdasarkan CSS.

Secara umum, v-if memiliki biaya peralihan (toggle cost) yang lebih tinggi, sementara v-show memiliki biaya rendering awal yang lebih besar. Jadi, gunakan v-show jika peralihan akan sering terjadi, dan lebih suka v-if jika kondisinya mungkin tidak berubah selama runtime.