VueJS - संपत्ति देखें
इस अध्याय में, हम वॉच प्रॉपर्टी के बारे में जानेंगे। एक उदाहरण का उपयोग करके, हम देखेंगे कि हम VueJS में वॉच प्रॉपर्टी का उपयोग कर सकते हैं।
उदाहरण
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
</body>
</html>
उपरोक्त कोड में, हमने दो टेक्स्टबॉक्स बनाए हैं, एक के साथ kilometers और दूसरे के साथ meters। डेटा प्रॉपर्टी में, किलोमीटर और मीटर को 0. शुरू किया जाता है। दो कार्यों के साथ बनाई गई घड़ी की वस्तु हैkilometers तथा meters। दोनों कार्यों में, किलोमीटर से मीटर और मीटर से किलोमीटर तक रूपांतरण किया जाता है।
जैसे ही हम किसी भी टेक्सबॉक्स के अंदर मान दर्ज करते हैं, जो भी बदला है, वॉच दोनों टेक्स्टबॉक्स को अपडेट करने का ध्यान रखता है। हमें किसी भी ईवेंट को विशेष रूप से असाइन करने की आवश्यकता नहीं है और इसे बदलने और प्रतीक्षा करने के अतिरिक्त कार्य करने की प्रतीक्षा करनी है। वॉच संबंधित कार्यों में की गई गणना के साथ टेक्स्टबॉक्स को अपडेट करने का ध्यान रखता है।
आइए ब्राउज़र में आउटपुट पर एक नज़र डालें।
चलो किलोमीटर टेक्स्टबॉक्स में कुछ मान दर्ज करते हैं और इसे मीटर टेक्स्टबॉक्स में बदलते हुए देखते हैं और इसके विपरीत।
चलिए अब मीटर टेक्स्टबॉक्स में प्रवेश करते हैं और इसे किलोमीटर टेक्स्टबॉक्स में बदलते हुए देखते हैं। यह ब्राउज़र में देखा जाने वाला डिस्प्ले है।