Vue学习系列 -- 计算属性
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- 计算属性相关的知识，希望对你有一定的参考价值。
不知道在上一节指令章节的学习中，大家有没有注意到一个细节：
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学习系列
以上是关于Vue学习系列 -- 计算属性的主要内容，如果未能解决你的问题，请参考以下文章