CPU基礎知識-CPU的組成 運算器、控制器、暫存器
阿新 • • 發佈:2021-12-13
有時候我們可能需要在{{}}
裡新增一些需要計算再展示出來資料
例如:在頁面中展示學生的成績總分和平均分:
<div id="app"> <table border="1"> <thead> <th>學科</th> <th>分數</th> </thead> <tbody> <tr> <td>數學</td> <td><input type="text" v-model="Math"></td> </tr> <tr> <td>英語</td> <td><input type="text" v-model="English"></td> </tr> <tr> <td>化學</td> <td><input type="text" v-model="chemistry"></td> </tr> <tr> <td>總分</td> <td>{{Math + English + chemistry}}</td> </tr> <tr> <td>平均分</td> <td>{{(Math + English + chemistry)/3}}</td> </tr> </tbody> </table> </div>
new Vue({ el:'#app', data:{ Math:88, English:77, chemistry:99, } })以上是通過在
{{}}
裡運算,得出總分和平均分雖然也能解決問題,但是特別不清晰,特別是當運算比較複雜的時候
那怎麼辦呢?
瞭解一點的,應該會想到
methods
,沒錯,確實
methods
也可以!但事實上,vue
給我們提供了一個更好的解決方案叫計算屬性計算屬性是
vue
例項中的一個配置選項:computed
通常裡面都是一個個計算相關的函式,函式裡頭可以寫大量的邏輯,最後返回計算出來的值
即我們可以把這些計算的過程寫到一個計算屬性中去,然後讓它動態的計算。
<div class="app"> <table border="1"> <thead> <th>學科</th> <th>成績</th> </thead> <tbody> <tr> <td>數學</td> <td><input type="text" v-model.number="Math"></td> </tr> <tr> <td>英語</td> <td><input type="text" v-model.number="English"></td> </tr> <tr> <td>化學</td> <td><input type="text" v-model.number="chemistry"></td> </tr> <tr> <td>總分</td> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <td>{{average}}</td> </tr> </tbody> </table> </div>
var vm = new Vue({ el:'.app', data:{ Math:88, English: 77, chemistry:99, }, computed:{ sum:function(){ return this.Math+ this.English+this.chemistry; }, average:function(){ return Math.round(this.sum/3); } } });
如上,
計算屬性一般就是用來通過其他的資料算出一個新資料,而且它有一個好處就是,它把新的資料快取下來了,當其他的依賴資料沒有發生改變,它呼叫的是快取的資料,這就極大的提高了我們程式的效能。而如果寫在
methods
裡,資料根本沒有快取的概念,所以每次都會重新計算。這也是為什麼這裡我們沒用methods
的原因以上就是
Vue
的計算屬性的基本用法!