Vue.js
संगणित गुण

टिप्पणियों

मूल उदाहरण

खाका

<div id="example">
  a={{ a }}, b={{ b }}
</div>

जावास्क्रिप्ट

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

परिणाम

a=1, b=2

यहां हमने एक गणना की गई संपत्ति घोषित की है b । हमारे द्वारा प्रदान किया गया फ़ंक्शन गुण vm.b लिए vm.b फ़ंक्शन के रूप में उपयोग किया जाएगा:

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

vm.b का मान हमेशा vm.b के मान पर निर्भर vm.a ।

आप एक सामान्य संपत्ति की तरह टेम्प्लेट में संपत्तियों की गणना कर सकते हैं। Vue पता है कि है vm.b पर निर्भर करता है vm.a तो यह किसी भी बाइंडिंग कि पर निर्भर करता है अपडेट करेगा, vm.b जब vm.a बदल जाता है।

कम्प्यूटेड गुण बनाम घड़ी

टेम्पलेट

<div id="demo">{{fullName}}</div>

उदाहरण देखें

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

संगणित उदाहरण

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

कम्प्यूटेड सेटर्स

गणना किए गए गुण जब भी कोई डेटा जिस पर गणना निर्भर करता है, स्वचालित रूप से पुन: प्रतिष्ठित किया जाएगा। हालाँकि, यदि आपको मैन्युअल रूप से एक गणना की गई संपत्ति को बदलने की आवश्यकता है, तो Vue आपको ऐसा करने के लिए एक सेटर विधि बनाने की अनुमति देता है:

खाका (ऊपर मूल उदाहरण से):

<div id="example">
  a={{ a }}, b={{ b }}
</div>

जावास्क्रिप्ट:

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    b: {
      // getter
      get: function () {
        return this.a + 1
      },
      // setter
      set: function (newValue) {
        this.a = newValue - 1 
      }
    }
  }

अब आप या तो गेट्टर या सेटर को इनवॉइस कर सकते हैं:

console.log(vm.b)       // -> 2
vm.b = 4                // (setter) 
console.log(vm.b)       // -> 4
console.log(vm.a)       // -> 3

vm.b = 4 सेटर को आमंत्रित करेगा, और इसे सेट करेगा। 3 पर एक; विस्तार से, vm.b 4 का मूल्यांकन करेगा।

वी-मॉडल के लिए कंप्यूटर्स सेटर्स का उपयोग करना

आपको गणना की गई संपत्ति पर एक v-model आवश्यकता हो सकती है। आम तौर पर, वी-मॉडल गणना की गई संपत्ति मूल्य को अपडेट नहीं करेगा।

नमूना:

<div id="demo">
  <div class='inline-block card'>
    <div :class='{onlineMarker: true, online: status, offline: !status}'></div>  
    <p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
  </div>

  <div class='margin-5'>
    <input type='checkbox' v-model='status'>Toggle status (This will show you as offline to others)
  </div>
</div>

स्टाइल:

#demo {
  font-family: Helvetica;
  font-size: 12px;
}
.inline-block > * {
  display: inline-block;
}
.card {
  background: #ddd;
  padding:2px 10px;
  border-radius: 3px;
}
.onlineMarker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.5s ease-out;
}

.online {
  background-color: #3C3;
}

.offline {
  background-color: #aaa;
}

.user-state {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.margin-5 {
  margin: 5px;
}

घटक:

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            }
        }
    }
})

fiddle यहाँ आप देखेंगे, रेडियो बटन पर क्लिक करने का कोई फायदा नहीं है, आपकी स्थिति अभी भी ऑनलाइन है।

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            },
            set (val) {
                this.statusProxy = val            
            }
        }
    }
})

फिडेल और अब आप देख सकते हैं कि चेकबॉक्स चेक / अनचेक होने पर टॉगल होता है।