四、vue计算属性的使用
通常，在模板中可直接通过插值语法显示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>
