Vue-এ ইনপুটগুলিতে দ্বি-দিকনির্দেশনা ডেটা বাইন্ডিং
এখন আমরা Vue ফ্রেমওয়ার্কে ইনপুটগুলির সাথে কাজ করা শিখব। এর সাহায্যে আমরা পৃষ্ঠায় প্রতিক্রিয়াশীলভাবে ডেটা যোগ করব। চলুন শুরু করা যাক। ধরুন আমাদের একটি ইনপুট আছে:
<template>
<input>
</template>
ধরুন আমাদের একটি
প্রপার্টি messageও আছে:
data() {
return {
message: 'hello',
}
}
আমরা এই প্রপার্টি এবং ইনপুটটিকে এমনভাবে লিঙ্ক করতে পারি
যাতে তাদের যেকোনো একটির পরিবর্তন
অন্যটির পরিবর্তন ঘটায়।
এটি v-model ডাইরেক্টিভ ব্যবহার করে করা হয়,
যেখানে ইনপুটটির সাথে বাউন্ড প্রপার্টিটি নির্দিষ্ট করা থাকে।
চলুন আমাদের ইনপুটটিকে
message প্রপার্টির সাথে বাইন্ড করি:
<template>
<input v-model="message">
</template>
কোড চালানোর পরে, ইনপুটটিতে message প্রপার্টির টেক্সট থাকবে।
এবং যদি ইনপুটের ডেটা এডিট করা হয় - প্রপার্টিটিও সেই অনুযায়ী পরিবর্তিত হবে।
এটি দেখতে, চলুন ইনপুটে প্রবেশ করানো বিষয়বস্তু একটি প্যারাগ্রাফে আউটপুট করি:
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>
একটি ইনপুট দেওয়া আছে। এমন করুন যাতে ইনপুটে প্রবেশ করানো টেক্সট অবিলম্বে এর নীচের প্যারাগ্রাফে আউটপুট হয়।
পূর্ববর্তী কাজটি এমনভাবে পরিবর্তন করুন, যাতে টেক্সটটি বড় হাতের অক্ষরে আউটপুট হয়।
একটি ইনপুট দেওয়া আছে। ধরুন এতে একটি নম্বর প্রবেশ করানো হয়। এমন করুন যাতে প্রবেশ করানো নম্বরের বর্গ প্রবেশ করার সাথে সাথেই প্যারাগ্রাফে আউটপুট হয়।
