Vue.js計(jì)算屬性

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

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、任丘ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的任丘網(wǎng)站制作公司

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

  <div id="example">

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

  </div>

        這樣，模板不再簡(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
后端代碼
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--學(xué)生成績(jī)表-->
<div id="app" class="container">
   <table class="table table-bordered table-striped table-hover">
      <caption class="text-center"><h3>學(xué)生成績(jī)表</h3></caption>
      <thead >
      <th class="text-center">學(xué)科</th>
      <th class="text-center">分?jǐn)?shù)</th>
      </thead>
      <tbody class="text-center">
      <tr>
         <td>數(shù)學(xué)</td>
         <td><input type="text" v-model.number="math" class="form-control text-center"></td>
      </tr>
 <!--v-model.number 制定為數(shù)字類型-->
 <tr>
         <td>物理</td>
         <td><input type="text" v-model.number="physics" class="form-control text-center"></td>
      </tr>
      <tr>
         <td>英語(yǔ)</td>
         <td><input type="text" v-model.number="english" class="form-control text-center "></td>
      </tr>
 <!--求總分-->
 <tr>
         <td>總分</td>
         <td>{{ math + physics+ english}}</td>
      </tr>
      <tr>
         <td>平均分</td>
         <td>{{ Math.round((math + physics+ english)/3) }}</td>
      </tr>

      


      <tr>
         <td>總分(計(jì)算屬性)</td>
         <td>{{ sum }}</td>
      </tr>

      <tr>
         <td>平均分[計(jì)算屬性]</td>
         <td>{{average}}</td>
      </tr>

 <!--求平均分-->

 </tbody>



   </table>


</div>




<script>
 var app  = new  Vue({
      el:"#app",
 data:{
         math:80,
 physics:90,
 english:100
 },
 computed:{
         sum: function () {
            return  this.math + this.physics + this.english

 },
 average:function () {
            return Math.round((this.sum/3))

   }
      }
   })


</script>






</body>
</html>

Vue.js計(jì)算屬性

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

<tr>
   <td>總分(計(jì)算屬性)</td>
   <td>{{ sum }}</td>
</tr>

<tr>
   <td>平均分[計(jì)算屬性]</td>
   <td>{{average}}</td>
</tr>

<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         math:80,
         physics:90,
         english:100
      },
      computed:{
         sum: function () {
            return  this.math + this.physics + this.english

         },
         average:function () {
            return Math.round((this.sum/3))

   }
      }
   })

Vue.js計(jì)算屬性

二、計(jì)算屬性 和 Methods的區(qū)別

    上述的操作，我們也可以用methods方法實(shí)現(xiàn)，但兩者之間存在本質(zhì)區(qū)別。

       當(dāng)頁(yè)面重新渲染（不是刷新）的時(shí)候，計(jì)算屬性不會(huì)變化，直接讀取緩存使用，適合較大量的計(jì)算和改變頻率較低的屬性；而method，就是當(dāng)頁(yè)面重新渲染的時(shí)候（頁(yè)面元素的data變化，頁(yè)面就會(huì)重新渲染），都會(huì)重新調(diào)用method。

        如果不希望有緩存，我們可以用method取代computed。

疑惑：為什么需要緩存？

    假設(shè)我們有一個(gè)重要的計(jì)算屬性 A ，這個(gè)計(jì)算屬性需要一個(gè)巨大的數(shù)組遍歷和做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒(méi)有緩存，我們將不可避免的多次執(zhí)行 A 的 getter ！

三、計(jì)算屬性的方法

   每一個(gè)計(jì)算屬性都包含一個(gè)getter和setter方法，計(jì)算屬性默認(rèn)為getter 。當(dāng)需要更改其中的部分?jǐn)?shù)據(jù)時(shí)，就可以使用setter方法，就可以在修改一個(gè)普通數(shù)據(jù)時(shí)，觸發(fā)setter方法，執(zhí)行一些自定義的操作。

    

網(wǎng)頁(yè)名稱：Vue.js計(jì)算屬性
URL網(wǎng)址：http://muchs.cn/article20/jsojjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、關(guān)鍵詞優(yōu)化、、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司