以下是计算属性的基本用法和示例：
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
computed: {
reversedMessage: function () {
// 计算属性，基于 message 动态计算出一个新值
return this.message.split('').reverse().join('');
}
}
});
在上面的例子中，reversedMessage 是一个计算属性，它依赖于 message 数据。当 message 发生变化时，reversedMessage 会自动更新。
计算属性可以具有更复杂的逻辑，也可以依赖多个属性。下面是一个更复杂的例子：
<div id="app">
<p>{{ fullName }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
// 计算属性，依赖于 firstName 和 lastName，动态计算出 fullName
return this.firstName + ' ' + this.lastName;
}
}
});
在这个例子中，fullName 计算属性依赖于 firstName 和 lastName，当任意一个依赖发生变化时，fullName 会重新计算。
计算属性的优势在于它们可以在模板中像普通属性一样使用，而且只有在需要时才会执行计算，避免了不必要的计算开销。
转载请注明出处：http://www.zyzy.cn/article/detail/4798/Vue