Բարդ պայմանները Vue-ում

v-if դիրեկտիվում կարելի է ստեղծել ավելի բարդ պայմաններ։ Ենթադրենք, օրինակ, num հատկության մեջ կարող է լինել 1, 2 կամ 3 թվերից մեկը։

javascriptdata() {
  return {
    num: 3, // ենթադրենք այնտեղ 3 է
  }
}

Հիմա եկեք ստեղծենք երեք պարբերություն, որոնցից մեկը միայն կցուցադրվի՝ կախված 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>

Կարելի է ստեղծել նաև ավելի բարդ պայմաններ։

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