成都创新互联网站制作重庆分公司

Vue.js计算属性

一、计算属性诞生的由来

我们提供的服务有:成都做网站、网站建设、外贸营销网站建设、微信公众号开发、网站优化、网站认证、任丘ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的任丘网站制作公司

    虽然在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。比如:    

 

     {{ 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}}               

Vue.js计算属性

 从上面的图片中我们看到了,计算的逻辑比较乱,不方便后期的维护与管理。这时我们使用计算属性来处理实例中的复杂逻辑。达到的效果和那种复杂的逻辑一样,但是更方便我们维护代码和逻辑。


   总分(计算属性)
   {{ sum }}



   平均分[计算属性]
   {{average}}