vue04

计算属性:用来处理复杂逻辑操作的,在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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容