Vue में इनपुट के लिए द्वि-दिशात्मक डेटा बाइंडिंग

अब हम Vue फ्रेमवर्क में इनपुट के साथ काम करना सीखेंगे। इनकी मदद से हम पृष्ठ पर रिएक्टिव तरीके से डेटा जोड़ेंगे। चलिए शुरू करते हैं। मान लीजिए कि हमारे पास एक इनपुट है:

App.vue<template>
  <input>
</template>

मान लीजिए कि हमारे पास एक प्रॉपर्टी message भी है:

javascriptdata() {
  return {
    message: 'hello',
  }
}

हम इस प्रॉपर्टी और इनपुट को इस तरह से लिंक कर सकते हैं कि उनमें से किसी एक में परिवर्तन दूसरे में परिवर्तन का कारण बने। यह v-model डायरेक्टिव की मदद से किया जाता है, जिसमें इनपुट से बाउंड प्रॉपर्टी निर्दिष्ट की जाती है।

चलिए अपने इनपुट को message प्रॉपर्टी से बाइंड करते हैं:

App.vue<template>
  <input v-model="message">
</template>

कोड लॉन्च करने के बाद, इनपुट में message प्रॉपर्टी का टेक्स्ट होगा। और यदि इनपुट में डेटा को एडिट किया जाता है - तो प्रॉपर्टी भी उसी तरह से बदल जाएगी। इसे देखने के लिए, आइए इनपुट में दर्ज किए गए कंटेंट को कहीं पैराग्राफ में प्रदर्शित करें:

App.vue<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>