Vue-এ শর্তসাপেক্ষ প্রদর্শন

পরবর্তী ডাইরেক্টিভ যা আমরা শিখব, তার নাম v-if। এর সাহায্যে আপনি উপাদানগুলি প্রদর্শন বা লুকিয়ে রাখতে পারেন। এই ডাইরেক্টিভটি কিভাবে কাজ করে: এটি data অবজেক্টের যেকোনো বৈশিষ্ট্যকে প্যারামিটার হিসেবে নেয়। যদি এই বৈশিষ্ট্যটির মান true হয় - তবে উপাদানটি প্রদর্শিত হবে, এবং যদি false হয় - তবে লুকিয়ে যাবে।

আসুন একটি উদাহরণ দেখি। ধরুন আমাদের কাছে v-if অ্যাট্রিবিউট সহ একটি প্যারাগ্রাফ আছে। এই অ্যাট্রিবিউটের মান হিসাবে ধরুন visible বৈশিষ্ট্যটি কাজ করছে, এভাবে:

<template>
	<p v-if="visible">text</p>
</template>

আসুন আমাদের বৈশিষ্ট্যের মান true-এ সেট করি। এই ক্ষেত্রে প্যারাগ্রাফটি প্রদর্শিত হবে:

data() {
	return {
		visible: true,
	}
}

আর যদি visible-এর মান false সেট করা হয়, তবে প্যারাগ্রাফটি লুকিয়ে যাবে:

data() {
	return {
		visible: false,
	}
}

ধরুন data-তে visible বৈশিষ্ট্য সংরক্ষিত আছে। ধরুন আপনার কাছে আরও দুটি প্যারাগ্রাফ আছে। এমন করুন যাতে প্রথম প্যারাগ্রাফটি স্ক্রিনে প্রদর্শিত হয়, যদি visible বৈশিষ্ট্যটির মান true হয়, এবং দ্বিতীয় প্যারাগ্রাফটি, বিপরীতভাবে, প্রদর্শিত হয় যদি বৈশিষ্ট্যটির মান visible false হয়।