Vue computed 計(jì)算屬性代碼實(shí)例
什么是計(jì)算屬性？？？
1、在computed中，可以定義一些屬性，這些屬性叫做【計(jì)算屬性】
2、計(jì)算屬性的本質(zhì)是一個(gè)方法，不過(guò)一般是將他們的名稱直接當(dāng)做屬性使用，不會(huì)當(dāng)方法調(diào)用
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <script src='http://m.4tl426be.cn/lib/vue-2.4.0.js'></script></head><body><div id='app'> <input type='text' v-model='firstname'>+ <input type='text' v-model='lastname'>= <input type='text' v-model='fullname'></div><script> var vm = new Vue({ el: ’#app’, data: { firstname: ’’, lastname: ’’ }, methods: {}, computed:{ // 在computed中，可以定義一些屬性，這些屬性叫做【計(jì)算屬性】 // 計(jì)算屬性的本質(zhì)是一個(gè)方法，不過(guò)一般是將他們的名稱直接當(dāng)做屬性使用，不會(huì)當(dāng)方法調(diào)用 ’fullname’:function () {return this.firstname + ’-’ + this.lastname; } } })</script></body></html>
重點(diǎn)注意
1、計(jì)算屬性，在調(diào)用的時(shí)候，一定不要加()去調(diào)用，直接將它當(dāng)做普通屬性使用
2 、計(jì)算屬性的function中引用的data中的數(shù)據(jù)發(fā)生了變化，就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值
3、 計(jì)算屬性的求值結(jié)果，會(huì)被緩存起來(lái)，方便下次直接使用；如果計(jì)算屬性方法中，所有來(lái)的任何數(shù)據(jù)沒(méi)有發(fā)生改變，則不會(huì)重新計(jì)算
內(nèi)容擴(kuò)展
vue之computed（計(jì)算屬性）的使用方法
在vue中，一些簡(jiǎn)易的計(jì)算可以直接在模板中計(jì)算，如：{{ number + 1 }}；但是在模板中如果有太多復(fù)雜的計(jì)算難以維護(hù);所以對(duì)于任何復(fù)雜的邏輯,你都應(yīng)該使用計(jì)算屬性的原因;
1.經(jīng)過(guò)處理返回的數(shù)據(jù)值,只要源數(shù)據(jù)沒(méi)有發(fā)生改變,computed函數(shù)里面對(duì)相應(yīng)的數(shù)據(jù)就不會(huì)反生改變,相當(dāng)于緩存在本地;發(fā)生改變的時(shí)候,computed對(duì)應(yīng)數(shù)據(jù)的函數(shù)也會(huì)發(fā)生改變;
2:computed屬性和methods屬性
你可能已經(jīng)注意到我們可以通過(guò)調(diào)用method來(lái)達(dá)到同樣的效果:我們可以將同一個(gè)函數(shù)定義為一個(gè)method而不是一個(gè)計(jì)算屬性,對(duì)于最終的結(jié)果,兩種方式確實(shí)是相同的；
然而,計(jì)算屬性是基于他們的依賴就行緩存的,計(jì)算屬性只有在它相關(guān)的依賴發(fā)生改變時(shí)才會(huì)重新求值,這意味著只要message 還沒(méi)有發(fā)生改變,多次訪問(wèn)reversedMessage計(jì)算屬性會(huì)立刻返回之前計(jì)劃算的結(jié)果,而不必再次執(zhí)行函數(shù).
3:computed中的屬性;
計(jì)算屬性默認(rèn)只有g(shù)etter不過(guò)在需要時(shí)也可以提供一個(gè)setter;
var vm=new Vue({ el:'#demo', data:{ firstName:'foo', lastName:'Bar', fullName:'foo Bar'},computed:{ fullName:function(){ get:function(){ return this.firstName+' '+this.lastName; }, setter:function(){ var names=newValue.split(’’); this.firstName=names[0]; this.lastName=names[names.length-1] } }}});
到此這篇關(guān)于Vue computed 計(jì)算屬性代碼實(shí)例的文章就介紹到這了,更多相關(guān)Vue之computed 計(jì)算屬性內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP編碼必備的8條原則2. 使用css實(shí)現(xiàn)全兼容tooltip提示框3. 一文帶你搞懂JavaScript中的進(jìn)制與進(jìn)制轉(zhuǎn)換4. 匹配模式 - XSL教程 - 45. 詳解JS前端使用迭代器和生成器原理及示例6. 得到XML文檔大小的方法7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)9. ASP基礎(chǔ)知識(shí)Command對(duì)象講解10. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？
網(wǎng)公網(wǎng)安備