Menampilkan Berdasarkan Kondisi di Vue

Direktif berikutnya yang akan kita pelajari disebut v-if. Dengannya, kita dapat menampilkan atau menyembunyikan elemen. Cara kerja direktif ini: ia menerima properti apa pun dari objek data sebagai parameternya. Jika properti tersebut bernilai true - maka elemen akan ditampilkan, dan jika false - maka akan disembunyikan.

Mari kita lihat contohnya. Misalkan kita memiliki paragraf dengan atribut v-if. Nilai dari atribut ini misalkan adalah properti visible, seperti ini:

App.vue<template>
  <p v-if="visible">teks</p>
</template>

Mari kita atur nilai properti kita menjadi true. Dalam kasus ini paragraf akan ditampilkan:

javascriptdata() {
  return {
    visible: true,
  }
}

Namun jika visible diatur ke nilai false, maka paragraf akan disembunyikan:

javascriptdata() {
  return {
    visible: false,
  }
}