Vue的Computed计算属性的使用
computed和methods类似
computed只能调用一次,methods可以调用多次,computed如果没有改变就会存在缓存中如果computed中的方法有所改变则重新计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>合为:{{funAll}}</h2>
<p>{{getTime()}}</p>
</div>
</body>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:"#app",
data:{
books:[
{price:100},
{price:200},
{price:50}
]
},
methods:{
getTime:function () {
return Date.now(); //返回一个时间戳
}
},
computed:{ //计算属性
funAll: function(){
let sum=0;
for(let i of this.books){
sum+=i.price;
}
return sum;
}
}
});
</script>
</html>