Vue में data ऑब्जेक्ट

कंपोनेंट का आधार डेटा होता है, जिसे हम मैनीपुलेट करेंगे। यह डेटा एक विशेष ऑब्जेक्ट data में संग्रहीत होता है। यह ऑब्जेक्ट एक विशेष मेथड का रिजल्ट रिटर्न करना चाहिए:

export default {
	data() {
		return {
			
		}
	}
}

आइए डेटा ऑब्जेक्ट की प्रॉपर्टी में कोई टेक्स्ट स्टोर करें:

data() {
	return {
		text1: '111',
		text2: '222',
	}
}

संग्रहीत डेटा को व्यू में डिस्प्ले किया जा सकता है। यह डबल कर्ली ब्रैकेट्स में किया जाता है, जिसमें उस प्रॉपर्टी का नाम लिखा होता है, जिसका वैल्यू हम डिस्प्ले करना चाहते हैं। आइए हमारी प्रॉपर्टीज के वैल्यू डिस्प्ले करते हैं:

<template>
	{{ text1 }}
	{{ text2 }}
</template>

आइए अब ऐसा करें कि हमारा प्रत्येक मैसेज अपने ही पैराग्राफ में डिस्प्ले हो:

<template>
	<p>{{ text1 }}</p>
	<p>{{ text2 }}</p>
</template>

मान लीजिए कि data में यूजर का नाम और उपनाम स्टोर है:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

प्रत्येक प्रॉपर्टी को अलग-अलग div टैग में डिस्प्ले करें।