Vue computed 计算属性
有的时候我们在html元素中数据并不是我们直接想要的,需要对数据进行处理,但是直接在html中拼写的话比较麻烦,而且很容易影响美观,这个时候就需要computed属性
代码如下
<body>
<div id="app">
<h2>总价格{{totalPrice}}</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
books:[
{id:110,name:'unix编程艺术',price:119},
{id:111,name:'代码大全',price:105},
{id:112,name:'深入理解计算机系统',price:98},
{id:113,name:'现代操作系统',price:87},
]
},
computed:{
totalPrice:function (){
let result=0;
for(let i=0;i<this.books.length;i++){
result +=this.books[i].price
}
return result;
}
}
})
</script>
</body>
效果图