Vue ফ্রেমওয়ার্কে রিঅ্যাকটিভিটি
data-এর যেকোনো ডেটা পরিবর্তন
পৃষ্ঠায় এই ডেটার প্রদর্শন তাৎক্ষণিকভাবে
পরিবর্তিত হওয়ার দিকে নিয়ে যায়। Vue-এর এই আচরণকে
রিঅ্যাকটিভিটি বলা হয়।
আসুন বাস্তবে পরীক্ষা করে দেখি। ধরুন আমাদের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
data() {
return {
text: 'xxx',
}
}
আসুন এই বৈশিষ্ট্যের মানটি আউটপুট করি:
<template>
{{ text }}
</template>
আসুন একটি বাটন তৈরি করি, যাতে ক্লিক করলে আমাদের বৈশিষ্ট্য পরিবর্তিত হবে:
<template>
{{ text }}
<button @click="change">text</button>
</template>
এখন একটি মেথড লিখি, যা বাটনে ক্লিক করলে কল হবে এবং বৈশিষ্ট্য পরিবর্তন করবে:
methods: {
change: function() {
this.text = 'yyy';
}
}
সমস্ত কোড একত্রিত করে এবং বাটনে ক্লিক করলে - স্ক্রিনের টেক্সট রিঅ্যাকটিভলি অন্য কিছুতে পরিবর্তিত হবে।
text বৈশিষ্ট্য দেওয়া হয়েছে। কোনো অনুচ্ছেদে
এই বৈশিষ্ট্যের বিষয়বস্তু আউটপুট করুন।
একটি বাটন দেওয়া হয়েছে। এমন করুন যাতে ক্লিক
করলে text বৈশিষ্ট্যের মান
রিঅ্যাকটিভলি অন্য কিছুতে পরিবর্তিত হয়।
দুটি বাটন দেওয়া হয়েছে। এমন করুন যাতে প্রথম বাটনে ক্লিক
করলে text বৈশিষ্ট্যের মান
রিঅ্যাকটিভলি একটি মানে পরিবর্তিত হয়,
এবং দ্বিতীয়টিতে ক্লিক করলে - অন্য মানে।
