Vue 計算屬性
計算屬性（Computed properties）類似於資料屬性，但它們依賴於其他屬性。
計算屬性的寫法像方法，但它們不接受任何輸入引數。
當依賴項發生變化時，計算屬性會自動更新，而方法則在發生某些事情時呼叫，例如事件處理。
當需要輸出依賴於其他內容的內容時，可以使用計算屬性。
計算屬性是動態的
計算屬性的主要優點是它的動態性，這意味著它會根據例如一個或多個數據屬性的值而變化。
計算屬性是我們將要學習的 Vue 例項中的第三個配置選項。我們已經學習過的另外兩個配置選項是 'data' 和 'methods'。
與 'data' 和 'methods' 一樣，計算屬性在 Vue 例項中也有一個保留名稱：'computed'。
語法
const app = Vue.createApp({
data() {
...
},
computed: {
...
},
methods: {
...
}
})
'是'或'否'的計算屬性
假設我們要建立一個表單來新增購物清單中的專案，並且我們想標記新專案是否重要。我們可以像之前示例那樣，在複選框被選中時新增一個 'true' 或 'false' 的反饋。
示例
輸入元素是動態的，以便文字反映狀態。
<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}
data() {
return {
chbxVal: false
}
}
自己動手試一試 »
然而，如果你問某人某事是否重要，他們很可能會回答 'yes' 或 'no'，而不是 'true' 或 'false'。所以為了讓我們的表單更符合日常語言（更直觀），我們應該在複選框上提供 'yes' 或 'no' 的反饋，而不是 'true' 或 'false'。
你猜怎麼著？計算屬性是幫助我們實現這一點的完美工具。
示例
透過一個名為 'isImportant' 的計算屬性，我們現在可以在切換複選框時自定義對使用者的文字反饋。
<input type="checkbox" v-model="chbxVal"> {{ isImportant }}
data() {
return {
chbxVal: false
}
},
computed: {
isImportant() {
if(this.chbxVal){
return 'yes'
}
else {
return 'no'
}
}
自己動手試一試 »
計算屬性 vs. 方法
計算屬性和方法都寫成函式，但它們是不同的
- 方法在從 HTML 呼叫時執行，而計算屬性在依賴項更改時自動更新。
- 計算屬性的使用方式與資料屬性相同，但它們是動態的。
