了解計算屬性

已完成

藉由使用 Handlebars 語法 ({{ }})，您可以顯示值，並將 JavaScript 插入您的 HTML 中。 這種語法的功能強大，但可能會導致令人混淆或重複的程式碼。 您可以使用 Vue 中的計算屬性，來卸載運算和其他形式的動態字串。

加入經計算屬性

如同將方法新增在 methods 欄位下，計算屬性也是以同樣的方式新增在 computed 欄位下。 「計算屬性」 是傳回值的函式。 如同方法，計算屬性可以利用 this 來存取 Vue 的使用中執行個體。

您可以使用經計算屬性來將 firstName 和 lastName 結合為 fullName 屬性、在陣列中執行查詢以傳回正確的值，或執行其他動態工作。

此外，計算屬性是「反應式」的。 如果計算屬性中的任何值遭到變更，則計算屬性便會更新以反映變更。

下列範例會建立 fullName。

const app = Vue.createApp({
    data() {
        return {
            firstName: 'Cheryl',
            lastName: 'Smith'
        }
    },
    computed: {
        fullName() {
            return `${this.lastName}, ${this.firstName}`
        }
    },
});

這是一個串連 lastName 和 firstName 欄位的字串常值。