文章目录
一. 回顾
前面学习了Day9——v-bind动态绑定class、style,今天来学习vue的计算属性
二. vue的计算属性
2.1 计算属性的应用情景
需求:有时候需要在多个地方将多个数据结合在一起显示,或者对数据进行转换后再显示。比如我们有2各变量firstName和lastName,需要结合起来显示完整的名称。如果不用计算属性,我们需要在多处地方书写{{firstName}}{{lastName}}
。
由上面的需求,我们不难想到可以使用vue的methods属性,如下:
<div id="app">
<!-- 将名字结合起来展示的普通做法-->
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName;
}
},
})
</script>
</body>
效果:
虽然使用methods属性可以解决上面的需求,但是用methods属性的话,在mustache语法里面写的是方法名(即{{xxx()}}
),mustache语法里面一般写的是名字而不是方法,所以用computed计算属性可以有更好的效果。
2.2 计算属性的基本使用
语法:
computed:{
xxx: function(){
}
}
例子:
<body>
<div id="app">
<!-- 将名字结合起来展示的普通做法-->
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<!--使用methods属性-->
<h2>{{getFullName()}}</h2>
<!--使用computed属性-->
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName;
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;//注意如果变量没有用this修饰,那么vue将会去全局找变量,而不是在vue的data属性里面找
}
}
})
</script>
</body>
效果:
2.3 计算属性的复杂操作
需求:有时候需要计算各种数据的累加
例子:
<div id="app">
总价格:{{totalPrice}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id:100, name: 'aaa', price:119},
{id:101, name: 'bbb', price:139},
{id:102, name: 'ccc', price:79},
{id:103, name: 'ddd', price:89},
]
},
computed: {
totalPrice: function () {
let result = 0;
for(let i = 0; i < this.books.length; i++){
result += this.books[i].price;
}
return result;
}
}
})
</script>
</body>
效果:
2.4 计算属性的getter和setter
例子:
<body>
<div id="app">
{{fullName}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
//这种写法是最简便的写法
// fullName: function () {
// return this.firstName + ' ' + this.lastName;
// }
//计算属性一般没有set方法,只读属性
// fullName: {
// get: function () {
// return this.firstName + ' ' + this.lastName;
// }
// },
//完整写法
fullName: {
set: function (newValue) {
console.log('----------' + newValue);
const name = newValue.split(' ');
this.firstName = name[0];
this.lastName = name[1];
},
get: function () {
return this.firstName + ' ' + this.lastName;
}
}
}
})
</script>
</body>
2.5 computed计算属性和methods属性的对比
2.5.1 使用methods
<body>
<div id="app">
<!-- 定义mthods-->
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
methods: {
getFullName: function () {
console.log('getFullName');
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
效果:
2.5.2 使用computed
<body>
<div id="app">
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
methods: {
getFullName: function () {
console.log('getFullName');
return this.firstName + ' ' + this.lastName;
}
},
computed: {
fullName: function () {
console.log('fullName');
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
效果:
总结:computed属性有缓存功能,性能比methods属性要好,能使用computed属性就尽量使用computed属性。