Komplexa villkor i Vue

I direktivet v-if kan man göra mer komplexa villkor. Låt oss till exempel anta att egenskapen num kan innehålla ett av talen 1, 2 eller 3:

javascriptdata() {
  return {
    num: 3, // låt oss anta att det är 3 nu
  }
}

Låt oss nu skapa tre stycken, varav endast ett kommer att visas beroende på värdet av egenskapen num:

html<template>
  <p v-if="num === 1">ett</p>
  <p v-if="num === 2">två</p>
  <p v-if="num === 3">tre</p>
</template>

Man kan också göra mer komplexa villkor:

html<template>
  <p v-if="num === 1 || num === 3">
    ett eller tre
  </p>
</template>