Vue.js學(xué)習(xí)之計算屬性
更新時間：2017年01月22日 11:26:51 作者：蘇打草莓
Vue.js 的內(nèi)聯(lián)表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計算屬性。下面這篇文章主要給大家介紹了Vue.js中的計算屬性,需要的朋友可以參考借鑒，一起來看看吧。
前言
計算屬性是用來聲明式的描述一個值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個計算屬性上時，Vue 會在其依賴的任何值導(dǎo)致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動并且易于維護。
開始用vue會把所有的模版上的數(shù)據(jù)都放到data屬性里，或者有的時候data屬性里變量多了之后覺得有些只是用一次的變量就直接寫到模版里了，后來看到同組的同事在用computed屬性，就又去查了一下api，發(fā)現(xiàn)這種情況其實最好用的就是computed。
1. computed可以保持模版的清晰，在template里盡量只進行展示和綁定，而不要加入邏輯操作。
2. 用computed的還有一個好處就是會跟隨其他data屬性的變化自動變化
比如官方文檔的一個例子：
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就會產(chǎn)生代碼的冗余，比如在直播中狀態(tà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的計算屬性的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了解決vue前后端端口不一致的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
本文介紹了使用vue-cli搭建的項目在開發(fā)時配置跨域，上線后不做任何任何修改，接口也可以訪問，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項目框架的詳細操作方法，需要的跟著學(xué)習(xí)下吧。2017-11-11
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
今天小編就為大家分享一篇vue 實現(xiàn)購物車總價計算，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在 Vue3 中,setup 函數(shù)是一個新引入的概念,它代替了之前版本中的 data、computed、methods 等選項,用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理,感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08