計(jì)算屬性:用來處理復(fù)雜邏輯操作的,在Vue.js中有了計(jì)算屬性這種方法,可以避免在模板中加入過度的業(yè)務(wù)邏輯,保證更好的結(jié)構(gòu)清晰和后期維護(hù)的效率,
例如:<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>計(jì)算屬性</title>
</head>
<body>
? ? <div class="itany">
? ? ? <button @click='add'>加貨</button>
? ? ? <h1>總價(jià)為:{{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>