Vue-তে প্রতিক্রিয়াশীল শর্ত
আসুন শর্তটিকে প্রতিক্রিয়াশীল করি। উদাহরণস্বরূপ, একটি বোতাম ক্লিক করে এলিমেন্টটি লুকিয়ে যেতে পারি। আমাদের কাছে নিম্নলিখিত প্যারাগ্রাফটি আছে:
<template>
<p v-if="visible">text</p>
</template>
আসুন আমাদের প্যারাগ্রাফটি প্রাথমিকভাবে দেখানো হয় তা নিশ্চিত করি:
data() {
return {
visible: true,
}
}
এখন একটি বোতাম তৈরি করি, যেটি ক্লিক করলে প্যারাগ্রাফটি লুকিয়ে যাবে:
<template>
<button @click="hide">লুকান</button>
<p v-if="visible">text</p>
</template>
বাউন্ড মেথডটি visible প্রপার্টিকে
false-এ পরিবর্তন করবে,
যার ফলে আমাদের প্যারাগ্রাফটি
লুকিয়ে যাবে:
methods: {
hide: function() {
this.visible = false;
}
}
একটি প্যারাগ্রাফ এবং একটি বোতাম দেওয়া আছে। ধরা যাক প্যারাগ্রাফটি প্রাথমিকভাবে লুকানো। একটি বোতাম তৈরি করুন যা প্যারাগ্রাফটি দেখাবে।
একটি প্যারাগ্রাফ এবং দুটি বোতাম দেওয়া আছে। ধরা যাক প্রথম বোতামটি প্যারাগ্রাফ দেখায়, এবং দ্বিতীয়টি - এটি লুকিয়ে দেয়।
পূর্ববর্তী কাজটি এমনভাবে পরিবর্তন করুন যাতে স্ক্রিনে সর্বদা শুধুমাত্র একটি বোতাম দৃশ্যমান থাকে: যদি প্যারাগ্রাফ দেখানো হয়, তাহলে লুকানোর বোতাম, আর যদি লুকানো থাকে - তাহলে দেখানোর বোতাম।
