当需要进行一些复杂的、依赖于其他属性的计算时，可以使用计算属性来处理这些计算，而不是在模板中直接进行计算。以下是使用Vue实现计算属性的示例：
<div id="app">
<p>商品价格：{
{ price }} 元</p>
<p>折扣后价格：{
{ discountPrice }} 元</p>
</div>
javascriptvar app = new Vue({
el: '#app',
data: {
originPrice: 100, // 商品原价
discount: 0.8 // 折扣
},
computed: {
price: function() {
// 计算商品价格
return this.originPrice;
},
discountPrice: function() {
// 计算折扣后的价格
return this.originPrice * this.discount;
}
}
});
在上面的代码中，我们定义了两个计算属性：price和discountPrice。price属性直接返回商品原价，而discountPrice属性则返回商品原价乘以折扣。在模板中，我们可以直接使用{
{ price }}和{
{ discountPrice }}来显示商品价格和折扣后价格。
需要注意的是，计算属性的计算是惰性的，也就是说，它们只有在需要时才会进行计算，然后缓存起来，直到依赖的属性发生变化时才重新计算。这样可以避免不必要的计算，提高了应用程序的性能。