×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

Vue.js计算属性-创新互联

一、计算属性诞生的由来

创新互联于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}}
      

 

 



   

Vue.js计算属性

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


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



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












0.0376s