Vue.js學(xué)習(xí)之計(jì)算屬性
前言
計(jì)算屬性是用來聲明式的描述一個(gè)值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個(gè)計(jì)算屬性上時(shí)，Vue 會(huì)在其依賴的任何值導(dǎo)致該計(jì)算屬性改變時(shí)更新 DOM。這個(gè)功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動(dòng)并且易于維護(hù)。
開始用vue會(huì)把所有的模版上的數(shù)據(jù)都放到data屬性里，或者有的時(shí)候data屬性里變量多了之后覺得有些只是用一次的變量就直接寫到模版里了，后來看到同組的同事在用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)的變化就可以用來計(jì)算是否展示視頻之類的上層屬性
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í)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
本文主要介紹了Vue打包后頁面出現(xiàn)空白解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
vue3通過canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來跟隨小編一起學(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
下面小編就為大家?guī)硪黄鉀QVue編譯時(shí)寫在style中的路徑問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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ì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子
今天小編就為大家分享一篇vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11