真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue.js計(jì)算屬性-創(chuàng)新互聯(lián)

一、計(jì)算屬性誕生的由來(lái)

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為浮山等服務(wù)建站，浮山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為浮山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

    雖然在模板中綁定表達(dá)式是非常便利的，但是它們實(shí)際上只用于簡(jiǎn)單的操作。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。比如：

 

   {{ message.split('').reverse().join('') }}

 


    這樣，模板不再簡(jiǎn)單和清晰。在實(shí)現(xiàn)反向顯示 message 之前，你應(yīng)該通過(guò)一個(gè)函數(shù)確認(rèn)它。所以，Vue.js提供了計(jì)算屬性來(lái)讓我們?nèi)ヌ幚韺?shí)例中的復(fù)雜邏輯。

    計(jì)算屬性 (computed properties) 就是不存在于原始數(shù)據(jù)中，而是在運(yùn)行時(shí)實(shí)時(shí)計(jì)算出來(lái)的屬性。

例如我們要實(shí)現(xiàn)一個(gè)學(xué)生成績(jī)表


學(xué)生成績(jī)表

學(xué)科分?jǐn)?shù)
數(shù)學(xué)80
物理90
英語(yǔ)100
總分270
平均分90
后端代碼



   
   Title
   
   
   

   




   
      
學(xué)生成績(jī)表

      
      學(xué)科
      分?jǐn)?shù)
      
      
      
         數(shù)學(xué)
         
      
 
 
         物理
         
      
      
         英語(yǔ)
         
      
 
 
         總分
         {{ math + physics+ english}}
      
      
         平均分
         {{ Math.round((math + physics+ english)/3) }}
      

      


      
         總分(計(jì)算屬性)
         {{ sum }}
      

      
         平均分[計(jì)算屬性]
         {{average}}
      

 

 



   

Vue.js計(jì)算屬性

 從上面的圖片中我們看到了，計(jì)算的邏輯比較亂，不方便后期的維護(hù)與管理。這時(shí)我們使用計(jì)算屬性來(lái)處理實(shí)例中的復(fù)雜邏輯。達(dá)到的效果和那種復(fù)雜的邏輯一樣，但是更方便我們維護(hù)代碼和邏輯。


   總分(計(jì)算屬性)
   {{ sum }}



   平均分[計(jì)算屬性]
   {{average}}