计算属性computed:用于计算复杂逻辑
案例：
js部分：
<div id="itany">
<h1>{{msg}}</h1>
<a href="">{{revMsg}}</a>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:'hello vue'
},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('===');
}
}
})
</script>
效果图：
计算属性.png
计算属性练习
body部分：
<div id="itany">
<button @click="alt">加货</button>
<p>总数为：{{add}}</p>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
pack:{price:5,count:3},
pack2:{price:7,count:4}
},
methods:{
alt:function(){
this.pack.count++;
}
},
computed:{
add:function(){
return this.pack.count*this.pack.price+this.pack2.count*this.pack2.price
}
}
})
</script>
计算属性练习2.png
