Sudėtingos sąlygos Vue

v-if direktyvoje galima daryti sudėtingesnes sąlygas. Tarkime, pavyzdžiui, savybėje num gali būti vienas iš skaičių 1, 2 arba 3:

javascriptdata() {
  return {
    num: 3, // tarkime, kad dabar yra 3
  }
}

Dabar padarykime tris pastraipas, iš kurių bus rodoma tik viena, priklausomai nuo savybės num reikšmės:

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

Galima daryti ir sudėtingesnes sąlygas:

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