计算属性的复杂操作
简单的数组操作,会用到计算属性里面,由于methods使用一次调用一次,没有缓存效率很低,所以在computed里计算
示例
<div id="app">
<h1>总价格:{{totalPrice}}</h1>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const apt = new Vue({
el:'#app',
data:{
books:[
{id: 01 , name: "帽子" , price: 32},
{id: 02 , name: "帽衫" , price: 132},
{id: 03 , name: "板鞋" , price: 91},
{id: 04 , name: "手机" , price: 1232},
{id: 05 , name: "手表" , price: 732},
{id: 06 , name: "裤子" , price: 46},
],
},
computed:{
totalPrice:function(){
let result = 0
for(let i=0 ; i < this.books.length; i++){
result += this.books[i].price
}
return result
}
},
})
</script>
显示结果
注意:
用到了for循环,需要多加练习