计算属性
computed
methods和computed看起来都可以实现我们的功能,
那么为什么还要多一个计算属性这个东西呢?
原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
<div id="app">
<h2 :style="{fontSize:fsize}">{{totalPrice}}</h2>
</div>
<script src="./demo/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
books: [{id:11,name:'黎明杀机',price:88},
{id:12,name:'黎明杀机2',price:99},
{id:13,name:'黎明杀机3',price:68},
{id:14,name:'黎明杀机4',price:568}
],
},
computed: {
totalPrice:function() {
let result = 0;
for(let book of this.books){//挺好用= -
result += book.price;
}
return result;
}
}
})
</script>
</body>