Komplexe Bedingungen in Vue

In der Direktive v-if können komplexere Bedingungen erstellt werden. Nehmen wir an, in der Eigenschaft num könnte eine der Zahlen 1, 2 oder 3 stehen:

javascriptdata() {
  return {
    num: 3, // Nehmen wir an, dort steht aktuell 3
  }
}

Erstellen wir nun drei Absätze, von denen nur einer angezeigt wird, abhängig vom Wert der Eigenschaft 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>

Man kann auch komplexere Bedingungen erstellen:

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