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 गुण का मान रिएक्टिवली एक मान में बदल जाए,
और दूसरे पर क्लिक करने पर - दूसरे में।
