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前后端端口不一致的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
vue開(kāi)發(fā)環(huán)境配置跨域的方法步驟
本文介紹了使用vue-cli搭建的項(xiàng)目在開(kāi)發(fā)時(shí)配置跨域，上線后不做任何任何修改，接口也可以訪問(wèn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue2.x+webpack快速搭建前端項(xiàng)目框架詳解
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項(xiàng)目框架的詳細(xì)操作方法，需要的跟著學(xué)習(xí)下吧。2017-11-11
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue 實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算
今天小編就為大家分享一篇vue 實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理,感興趣的朋友一起看看吧2024-02-02
富文本編輯器quill.js開(kāi)發(fā)之自定義格式擴(kuò)展
這篇文章主要為大家介紹了富文本編輯器quill.js開(kāi)發(fā)之自定義格式擴(kuò)展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08