Vue.js學(xué)習(xí)之計(jì)算屬性
前言
計(jì)算屬性是用來(lái)聲明式的描述一個(gè)值依賴(lài)了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個(gè)計(jì)算屬性上時(shí)，Vue 會(huì)在其依賴(lài)的任何值導(dǎo)致該計(jì)算屬性改變時(shí)更新 DOM。這個(gè)功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動(dòng)并且易于維護(hù)。
開(kāi)始用vue會(huì)把所有的模版上的數(shù)據(jù)都放到data屬性里，或者有的時(shí)候data屬性里變量多了之后覺(jué)得有些只是用一次的變量就直接寫(xiě)到模版里了，后來(lái)看到同組的同事在用computed屬性，就又去查了一下api，發(fā)現(xiàn)這種情況其實(shí)最好用的就是computed。
1. computed可以保持模版的清晰，在template里盡量只進(jìn)行展示和綁定，而不要加入邏輯操作。
2. 用computed的還有一個(gè)好處就是會(huì)跟隨其他data屬性的變化自動(dòng)變化
比如官方文檔的一個(gè)例子：
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
})
如果用watch就會(huì)產(chǎn)生代碼的冗余，比如在直播中狀態(tài)的變化就可以用來(lái)計(jì)算是否展示視頻之類(lèi)的上層屬性
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
總結(jié)
以上就是關(guān)于Vue.js的計(jì)算屬性的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
本文主要介紹了Vue打包后頁(yè)面出現(xiàn)空白解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了詳解在Vue中通過(guò)自定義指令獲取dom元素 ，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12
這篇文章主要介紹了vue使用file-saver本地文件導(dǎo)出,大家需要安裝xlsx和file-saver，然后創(chuàng)建localExports.js文件，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2022-01-01
vue如何判斷數(shù)組中的對(duì)象是否包含某個(gè)值
這篇文章主要介紹了vue如何判斷數(shù)組中的對(duì)象是否包含某個(gè)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue實(shí)現(xiàn)導(dǎo)出excel表格功能
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出excel表格的功能，在文章末尾給大家提到了vue中excel表格的導(dǎo)入和導(dǎo)出代碼,需要的朋友可以參考下2018-03-03
解決Vue編譯時(shí)寫(xiě)在style中的路徑問(wèn)題
下面小編就為大家?guī)?lái)一篇解決Vue編譯時(shí)寫(xiě)在style中的路徑問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
本篇文章主要介紹了Vue.directive自定義指令的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例
這篇文章主要介紹了Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子
今天小編就為大家分享一篇vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11