溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了Vue computed如何使用計算屬性，內(nèi)容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
什么是計算屬性？？？
1、在computed中，可以定義一些屬性，這些屬性叫做【計算屬性】
2、計算屬性的本質(zhì)是一個方法，不過一般是將他們的名稱直接當做屬性使用，不會當方法調(diào)用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../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中，可以定義一些屬性，這些屬性叫做【計算屬性】
// 計算屬性的本質(zhì)是一個方法，不過一般是將他們的名稱直接當做屬性使用，不會當方法調(diào)用
'fullname':function () {
return this.firstname + '-' + this.lastname;
}
}
})
</script>
</body>
</html>重點注意
1、計算屬性，在調(diào)用的時候，一定不要加()去調(diào)用，直接將它當做普通屬性使用
2 、計算屬性的function中引用的data中的數(shù)據(jù)發(fā)生了變化，就會立即重新計算這個計算屬性的值
3、 計算屬性的求值結(jié)果，會被緩存起來，方便下次直接使用；如果計算屬性方法中，所有來的任何數(shù)據(jù)沒有發(fā)生改變，則不會重新計算
內(nèi)容擴展
vue之computed（計算屬性）的使用方法
在vue中，一些簡易的計算可以直接在模板中計算，如：{{ number + 1 }}；但是在模板中如果有太多復雜的計算難以維護;所以對于任何復雜的邏輯,你都應該使用計算屬性的原因;
1.經(jīng)過處理返回的數(shù)據(jù)值,只要源數(shù)據(jù)沒有發(fā)生改變,computed函數(shù)里面對相應的數(shù)據(jù)就不會反生改變,相當于緩存在本地;發(fā)生改變的時候,computed對應數(shù)據(jù)的函數(shù)也會發(fā)生改變;
2:computed屬性和methods屬性
你可能已經(jīng)注意到我們可以通過調(diào)用method來達到同樣的效果:我們可以將同一個函數(shù)定義為一個method而不是一個計算屬性,對于最終的結(jié)果,兩種方式確實是相同的；
然而,計算屬性是基于他們的依賴就行緩存的,計算屬性只有在它相關的依賴發(fā)生改變時才會重新求值,這意味著只要message 還沒有發(fā)生改變,多次訪問reversedMessage計算屬性會立刻返回之前計劃算的結(jié)果,而不必再次執(zhí)行函數(shù).
3:computed中的屬性;
計算屬性默認只有getter不過在需要時也可以提供一個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]
}
}
}
});以上就是關于Vue computed如何使用計算屬性的內(nèi)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
