通常，在模板中可直接通过插值语法显示data中的属性，但是在某些情况，需要将某些数据进行转化后显示或者将多个数据结合起来显示。
<body>
<div id="app">
<!-- 将张、三 拼接成一个完整的名字，在不使用计算属性，可以有以下写法 -->
<h2>{{surname + ' ' + name}}</h2>
<h2>{{surname}} {{name}}</h2>
<!--也可以使用methods 的方式写 -->
<h2>{{getFullName()}}</h2>
<!-- 以上方法第一、第二种方法，过于冗长繁琐，第三种方法，不符合阅读习惯，因为通常我们使用Mustache会直接插值，而不是调用方法 -->
<!-- 因此，就需要使用计算属性 -->
<h2>{{fullName}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 模拟后端传参
surname: '张',
name: '三'
},
methods: {
getFullName: function(){
return this.surname + ' ' + this.name
}
},
// 计算属性，不同于方法，其类似于变量
computed: {
// 在定义计算属性时，一般不加动词get等，命名方式类似变量，在模板中也同变量一样使用
fullName: function(){
return this.surname + ' ' + this.name
}
}
})
</script>
</body>
效果图：
<body>
<div id="app">
<h2>总价：{{totlePrice}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 计算下面这些书籍的总价
books:[
{id: 101,name: 'Uinx编程技术',price: 108},
{id: 102,name: '代码大全',price: 99},
{id: 103,name: '深入理解计算机原理',price: 70},
{id: 104,name: '现代操作系统',price: 58},
]
},
// 计算属性，不同于方法，其类似于变量
computed: {
// 在定义计算属性时，一般不加动词get等，命名方式类似变量，在模板中也同变量一样使用
totlePrice: function(){
let result = 0;
for (i = 0; i < this.books.length; i++){
result += this.books[i].price;
}
return result;
}
}
})
</script>
</body>