从品牌网站建设到网络营销策划,从策略到执行的一站式服务
一、计算属性诞生的由来
创新互联于2013年创立,先为浮山等服务建站,浮山等地企业,进行企业商务咨询服务。为浮山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。虽然在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。比如:
{{ message.split('').reverse().join('') }}
这样,模板不再简单和清晰。在实现反向显示 message 之前,你应该通过一个函数确认它。所以,Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑。
计算属性 (computed properties) 就是不存在于原始数据中,而是在运行时实时计算出来的属性。
例如我们要实现一个学生成绩表
学科 | 分数 |
---|---|
数学 | 80 |
物理 | 90 |
英语 | 100 |
总分 | 270 |
平均分 | 90 |
后端代码Title
学生成绩表
学科 分数 数学 物理 英语 总分 {{ math + physics+ english}} 平均分 {{ Math.round((math + physics+ english)/3) }} 总分(计算属性) {{ sum }} 平均分[计算属性] {{average}}
从上面的图片中我们看到了,计算的逻辑比较乱,不方便后期的维护与管理。这时我们使用计算属性来处理实例中的复杂逻辑。达到的效果和那种复杂的逻辑一样,但是更方便我们维护代码和逻辑。
总分(计算属性) {{ sum }} 平均分[计算属性] {{average}}