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 প্রপার্টি দেওয়া আছে, যাতে বর্তমান সপ্তাহের দিন লিখিত আছে। ধরা যাক আপনার কাছে সাতটি প্যারাগ্রাফও আছে, যার প্রতিটিতে সপ্তাহের একটি দিনের নাম লেখা আছে। এমনভাবে করুন যেন পর্দায় শুধুমাত্র সেই প্যারাগ্রাফটি দৃশ্যমান হয় যাতে বর্তমান সপ্তাহের দিনের নাম রয়েছে।