六、计算属性的使用(computed)
1、计算属性包含getter和setter方法，如下图所示，调用时不用加“（）”,但是当我们一般使用时，一般情况下不需要实现set方法，为只读属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<span>
{{fullName}}
</span>
</div>
<script>
const app = new Vue({
el:"#app",
data: {
firstName: "Kobe",
lastName: "Bryant",
},
//计算属性一般是 没有set方法，为只读属性
computed: {
//完整写法
fullName: {
set: function(newValue){
console.log(newValue);
const names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
get: function(){
return this.firstName + this.lastName ;
}
}
//简便写法
//fullName: function(){
//}
}
});
</script>
</body>
</html>
2、计算属性和methods对比，计算属性会将执行结果存放到缓存中，不需要重复的从头开始执行方法，methods需要从头执行，放使用 for 的情况较多时，计算属性可以提供更加优质的效率。
下图为计算属性的一般操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h5> 书的总价格 {{priceSum}} </h5>
</div>
<script>
const app = new Vue({
el : "#app",
data:{
books:[
{id: 110 , name: "Unix编程技术" , price: 119},
{id: 120 , name: "书本术1" , price: 119},
{id: 130 , name: "书本术2" , price: 189},
{id: 140 , name: "书本术3" , price: 245},
]
},
computed:{
priceSum:function(){
let result = 0;
// for(let i= 0 ; i< this.books.length ; i++){
// result += this.books[i].price;
// }
// for(let i in this.books){
// result += this.books[i].price;
// }
for(let book of this.books){
result += book.price;
}
return result;
}
}
});
</script>
</body>
</html>
