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

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

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

Հիմա եկեք ստեղծենք երեք պարբերություն, որոնցից մեկը միայն կցուցադրվի՝ կախված num հատկության արժեքից։

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

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

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

Տրված է day հատկությունը, որում գրված է ընթացիկ օրվա անունը։ Ենթադրենք, դուք ունեք յոթ պարբերություն, որոնցից յուրաքանչյուրում գրված է շաբաթվա օրվա անունը։ Ապահովեք, որ էկրանին տեսանելի լինի միայն ընթացիկ օրվա անունը պարունակող պարբերությունը։