不知道在上一节指令章节的学习中，大家有没有注意到一个细节：
Vue.js模板内的表达式只能进行简单的计算，当其过长或者逻辑复杂时会变得难以维护，遇到这个问题如何处理呢？答案是计算属性。
在计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终只要返回一个结果即可。
使用计算属性有以下两点好处：
计算属性相当于对数据操作的封装，用户只需要知道如何使用就可以了，无需关注逻辑细节；解耦视图与业务的逻辑，也便于代码维护通过前面几个章节的学习，我们已经知道了了el、data、methods三个属性，而计算属性的关键字是computed。
废话少说，下面我们一块来学习一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning Vue.js</title> </head> <body> <div id="app1"> <span style="color:red"> 总分数:{{scores}}</span></br> <span style="color:red"> 平均分数:{{averagescore}}</span></br> </div> </body> <!--这里是以CDN引入的方式加载的vue.js--> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el : "#app1", //指定绑定的DOM元素 data : { //设置data属性值 grade : [ { course : "english", score : 90 }, { course : "chinese", score : 97 }, { course : "math", score : 90 }, ] }, computed : { //设置方法属性 scores : function() { var scores = 0.0; for (var i=0; i < this.grade.length; i ++) { scores += this.grade[i].score; } return scores; }, averagescore : function() { var average = 0.0; average = this.scores / this.grade.length; return average; } } }) </script> </html>上面的代码里使用了两个计算属性：总分数、平均值，代码很简单，就无需在解释了。
最后给出我自己的建议：对于复杂的逻辑处理，如函数调用、运算最好都放到计算属性里去。
Vue.js学习系列 -- 基础知识了解
Vue学习系列 -- vue生成周期了解
Vue学习系列 -- 常见事件/指令学习
