Vue में इवेंट द्वारा फॉर्म डेटा प्राप्त करना
मान लीजिए कि हमारे पास एक बटन और एक इनपुट है, जिसमें एक नंबर दर्ज किया जाता है। बटन दबाने पर इनपुट में दर्ज संख्या का वर्ग आउटपुट करते हैं। आइए कार्यान्वयन शुरू करें।
समस्या को हल करने के लिए हमें दो गुणों की आवश्यकता होगी।
गुण num
इनपुट में डेटा दर्ज करने के दौरान बदलता रहेगा,
और गुण res में हम
वर्ग का परिणाम दर्ज करेंगे:
data() {
return {
num: 0,
res: 0
}
}
आइए अब एक इनपुट बनाएं, इसे
गुण num से बांधें, एक बटन बनाएं,
जिस पर क्लिक करने पर मेथड calc निष्पादित होगी,
और एक पैराग्राफ भी बनाएं, जिसमें
परिणाम आउटपुट होगा:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">काम करें</button>
</template>
आइए मेथड calc का कार्यान्वयन लिखें:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
ऐसा होगा कि जैसे ही मेथड calc
कॉल की जाएगी (और यह बटन दबाने पर
होगी), गुण res में
परिणाम दर्ज हो जाएगा और साथ ही साथ हमारे
पैराग्राफ में आउटपुट हो जाएगा।
एक इनपुट दिया गया है। एक बटन दी गई है। एक पैराग्राफ दिया गया है। इनपुट में एक नंबर दर्ज किया जाता है। ऐसा करें कि बटन दबाने पर पैराग्राफ में उस संख्या का वर्गमूल दिखाई दे।
दो इनपुट दिए गए हैं। एक बटन दी गई है। एक पैराग्राफ दिया गया है। प्रत्येक इनपुट में नंबर दर्ज किए जाते हैं। ऐसा करें, कि बटन दबाने पर पैराग्राफ में इन नंबरों का योग दिखाई दे।
दो इनपुट दिए गए हैं। एक बटन दी गई है। प्रत्येक इनपुट में कोई टेक्स्ट दर्ज किया जाता है। ऐसा करें कि बटन दबाने पर पहले इनपुट का टेक्स्ट दूसरे में चला जाए और दूसरे का पहले में।
एक इनपुट, 3 पैराग्राफ और एक बटन दी गई है। इनपुट में
उपयोगकर्ता का पूरा नाम स्पेस से अलग करके दर्ज किया जाता है। ऐसा करें
कि बटन दबाने पर पहले
पैराग्राफ में उपयोगकर्ता का उपनाम दिखाई दे, दूसरे में - पहला नाम, और तीसरे में - मध्य नाम।
