Monimutkaiset ehdot Vue:ssa

v-if-direktiivissä voidaan tehdä monimutkaisempiakin ehtoja. Oletetaan esimerkiksi, että num-ominaisuudessa voi olla yksi luvuista 1, 2 tai 3:

javascriptdata() {
  return {
    num: 3, // olkoon siellä nyt 3
  }
}

Tehdään nyt kolme kappaletta, joista vain yksi näytetään num-ominaisuuden arvosta riippuen:

html<template>
  <p v-if="num === 1">yksi</p>
  <p v-if="num === 2">kaksi</p>
  <p v-if="num === 3">kolme</p>
</template>

Voidaan tehdä myös monimutkaisempia ehtoja:

html<template>
  <p v-if="num === 1 || num === 3">
    yksi tai kaksi
  </p>
</template>