vue04
2018-09-17 本文已影响0人
暴打小乳猪
计算属性：用来处理复杂逻辑操作的，在Vue.js中有了计算属性这种方法，可以避免在模板中加入过度的业务逻辑，保证更好的结构清晰和后期维护的效率，
例如：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div class="itany">
<button @click='add'>加货</button>
<h1>总价为:{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
package1:{count:5,price:3},
package2:{count:8,price:4}
},
computed:{
total:function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
