在Vue中,computed是一個十分常用的選項,它允許我們根據已有的數據計算出衍生的屬性。然而,有時候我們需要更復雜的計算,這就需要我們對computed技巧進行更深入的了解。
下面是幾個實用的computed技巧:
// 1. 使用對象計算屬性
computed: {
user () {
return {
name: this.name,
email: this.email,
coverPhotoUrl: this.coverPhotoUrl
}
}
}
// 2. 帶參計算屬性
computed: {
getFullName () {
return this.firstName + ' ' + this.lastName
},
setFullName (name) {
const parts = name.split(' ')
this.firstName = parts[0]
this.lastName = parts[1]
}
}
// 3. 對象展開運算符
computed: {
...mapState([
'count'
]),
...mapGetters([
'doneTodos',
'doneTodosCount'
])
}
使用對象計算屬性的主要優點是可以清晰地看到計算屬性返回的是一個對象,而不是多個屬性。跟蹤對象屬性的更改比跟蹤多個獨立屬性的更改更容易。
帶參計算屬性非常適合在輸入組件中使用。通過將計算屬性定義為getter/setter函數,我們可以在組件中使用v-model綁定到這個計算屬性,并且可以實現雙向數據綁定。
對象展開運算符可以將多個computed選項組合在一起。這樣可以清楚地顯示每個選項來自哪里,使得代碼更加簡潔、易于閱讀。
上一篇如何在容器中定位文本?
下一篇python 西安培訓