Kondisi Kompleks di Vue

Dalam direktif v-if kita dapat membuat kondisi yang lebih kompleks. Misalnya, pada properti num dapat berisi salah satu angka 1, 2, atau 3:

javascriptdata() {
  return {
    num: 3, // misalnya saat ini berisi 3
  }
}

Sekarang mari kita buat tiga paragraf, di mana hanya satu yang akan ditampilkan tergantung pada nilai properti num:

html<template>
  <p v-if="num === 1">one</p>
  <p v-if="num === 2">two</p>
  <p v-if="num === 3">three</p>
</template>

Kita juga dapat membuat kondisi yang lebih kompleks:

html<template>
  <p v-if="num === 1 || num === 3">
    one or two
  </p>
</template>