VueJS - कम्प्यूटेड गुण

हमने पहले ही Vue उदाहरण के लिए और घटकों के लिए विधियाँ देखी हैं। गणना किए गए गुण विधियों की तरह हैं लेकिन विधियों की तुलना में कुछ अंतर के साथ, जिस पर हम इस अध्याय में चर्चा करेंगे।

इस अध्याय के अंत में, हम तरीकों का उपयोग कब और गणना किए गए गुणों का उपयोग करने के बारे में निर्णय लेने में सक्षम होंगे।

आइए एक उदाहरण का उपयोग करके गणना किए गए गुणों को समझते हैं।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h1>My name is {{firstname}} {{lastname}}</h1>
         <h1>Using computed method : {{getfullname}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

vue_computeprops.js

var vm = new Vue({
   el: '#computed_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

यहाँ, हमने बनाया है .htmlFirstname और lastname वाली फाइल। Firstname और Lastname एक टेक्स्टबॉक्स है, जो Firstname और lastname के गुणों का उपयोग करने के लिए बाध्य है।

हम गणना की गई विधि getfullname को कॉल कर रहे हैं, जो पहले नाम और अंतिम नाम दर्ज करता है।

computed :{
   getfullname : function(){
      return this.firstname +" "+ this.lastname;
   }
}

जब हम टेक्स्टबॉक्स में टाइप करते हैं, तो फ़ंक्शन द्वारा लौटाया जाता है, जब गुण फर्स्टनाम या लास्टनाम बदल जाते हैं। इस प्रकार, संगणित की सहायता से हमें कुछ विशिष्ट करने की आवश्यकता नहीं है, जैसे कि किसी फ़ंक्शन को कॉल करना याद रखना। संगणित होने के साथ यह अपने आप ही पुकारा जाने लगता है, क्योंकि गुणों का उपयोग परिवर्तन के अंदर किया जाता है, अर्थात् फर्स्टनाम और लास्टनाम।

इसे निम्न ब्राउज़र में प्रदर्शित किया जाता है। टेक्स्टबॉक्स में टाइप करें और गणना किए गए फ़ंक्शन का उपयोग करके अपडेट हो जाएगा।

अब, आइए एक विधि और गणना की गई संपत्ति के बीच के अंतर को समझने की कोशिश करें। दोनों वस्तुएं हैं। अंदर परिभाषित कार्य हैं, जो एक मान लौटाता है।

विधि के मामले में, हम इसे एक फ़ंक्शन के रूप में कहते हैं, और एक संपत्ति के रूप में गणना के लिए। निम्नलिखित उदाहरण का उपयोग करते हुए, आइए हम विधि और गणना की गई संपत्ति के बीच के अंतर को समझते हैं।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed
            property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         });
      </script>
   </body>
</html>

उपरोक्त कोड में, हमने एक विधि बनाई है जिसे कहा जाता है getrandomno1 और एक समारोह के साथ एक गणना की संपत्ति getrandomno। दोनों Math.random () का उपयोग कर यादृच्छिक संख्या वापस दे रहे हैं।

इसे नीचे दिखाए गए अनुसार ब्राउज़र में प्रदर्शित किया जाता है। विधि और गणना की गई संपत्ति को अंतर दिखाने के लिए कई बार कहा जाता है।

यदि हम ऊपर दिए गए मूल्यों को देखते हैं, तो हम देखेंगे कि गणना की गई संपत्ति से लौटाए गए यादृच्छिक नंबर उसी समय की संख्या के बावजूद बने रहते हैं। इसका मतलब यह है कि हर बार यह कहा जाता है, अंतिम मूल्य सभी के लिए अद्यतन किया जाता है। जबकि एक विधि के लिए, यह एक फ़ंक्शन है, इसलिए, हर बार इसे कहा जाता है यह एक अलग मूल्य देता है।

कम्प्यूटेड गुणों में प्राप्त / सेट करें

इस खंड में, हम एक उदाहरण का उपयोग करके गणना किए गए गुणों में प्राप्त / सेट कार्यों के बारे में सीखेंगे।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  }
               }
            }
         });
      </script>
   </body>
</html>

हमने एक इनपुट बॉक्स को परिभाषित किया है जो कि बाध्य है fullname, जो एक संकलित संपत्ति है। यह एक फ़ंक्शन कहलाता हैget, जो पूरा नाम, पहला नाम और अंतिम नाम देता है। इसके अलावा, हमने पहला और अंतिम नाम इस प्रकार प्रदर्शित किया है -

<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>

चलो ब्राउज़र में एक ही जाँच करें।

अब, यदि हम टेक्स्टबॉक्स में नाम बदलते हैं, तो हम देखेंगे कि निम्नलिखित स्क्रीनशॉट में प्रदर्शित नाम में यह प्रतिबिंबित नहीं है।

आइए फुलनाम गणना की गई संपत्ति में सेटर फ़ंक्शन को जोड़ें।

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.firstName = fname[0];
                     this.lastName = fname[1]
                  }
               }
            }
         });
      </script>
   </body>
</html>

हमने फुलनाम गणना की गई संपत्ति में सेट फ़ंक्शन को जोड़ा है।

computed :{
   fullname : {
      get : function() {
         return this.firstName+" "+this.lastName;
      },
      set : function(name) {
         var fname = name.split(" ");
         this.firstName = fname[0];
         this.lastName = fname[1]
      }
   }
}

इसका नाम पैरामीटर के रूप में है, जो टेक्स्टबॉक्स में पूर्ण नाम के अलावा कुछ भी नहीं है। बाद में, इसे अंतरिक्ष पर विभाजित किया जाता है और पहले नाम और अंतिम नाम को अपडेट किया जाता है। अब, जब हम कोड चलाते हैं और टेक्स्टबॉक्स को संपादित करते हैं, तो वही चीज़ ब्राउज़र में प्रदर्शित होगी। सेट फ़ंक्शन के कारण Firstname और lastname अपडेट किया जाएगा। प्राप्त फ़ंक्शन पहले नाम और अंतिम नाम देता है, जबकि सेट फ़ंक्शन इसे अपडेट करता है, अगर कुछ भी संपादित किया जाता है।

अब, जो कुछ भी टेक्स्टबॉक्स में टाइप किया गया है, वह उपरोक्त स्क्रीनशॉट में दिखाए अनुसार प्रदर्शित होता है।