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>
एक इनपुट दिया गया है। ऐसा करें कि इनपुट में दर्ज किया गया टेक्स्ट तुरंत उसके नीचे पैराग्राफ में प्रदर्शित हो।
पिछले कार्य को इस तरह संशोधित करें, कि टेक्स्ट अपरकेस (बड़े अक्षरों) में प्रदर्शित हो।
एक इनपुट दिया गया है। मान लीजिए कि इसमें एक नंबर दर्ज किया जाता है। ऐसा करें कि दर्ज करते समय पैराग्राफ में दर्ज किए गए नंबर का वर्ग (स्क्वायर) प्रदर्शित हो।
