Vue computed 計算屬性程式碼例項

阿新 • • 發佈：2020-04-23

什麼是計算屬性？？？

1、在computed中，可以定義一些屬性，這些屬性叫做【計算屬性】

2、計算屬性的本質是一個方法，不過一般是將他們的名稱直接當做屬性使用，不會當方法呼叫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="firstname">+
  <input type="text" v-model="lastname">=
  <input type="text" v-model="fullname">
</div>
<script>
  var vm = new Vue({
    el: '#app',data: {
      firstname: '',lastname: ''
    },methods: {},computed:{
      // 在computed中，可以定義一些屬性，這些屬性叫做【計算屬性】
      // 計算屬性的本質是一個方法，不過一般是將他們的名稱直接當做屬性使用，不會當方法呼叫
      'fullname':function () {
        return this.firstname + '-' + this.lastname;
      }
     }
  })
</script>
</body>
</html>

重點注意

1、計算屬性，在呼叫的時候，一定不要加()去呼叫，直接將它當做普通屬性使用

2 、計算屬性的function中引用的data中的資料發生了變化，就會立即重新計算這個計算屬性的值

3、計算屬性的求值結果，會被快取起來，方便下次直接使用；如果計算屬性方法中，所有來的任何資料沒有發生改變，則不會重新計算

內容擴充套件

vue之computed（計算屬性）的使用方法

在vue中，一些簡易的計算可以直接在模板中計算，如：{{ number + 1 }}；但是在模板中如果有太多複雜的計算難以維護;所以對於任何複雜的邏輯,你都應該使用計算屬性的原因;

1.經過處理返回的資料值,只要源資料沒有發生改變,computed函式裡面對相應的資料就不會反生改變,相當於快取在本地;發生改變的時候,computed對應資料的函式也會發生改變;

2:computed屬性和methods屬性

你可能已經注意到我們可以通過呼叫method來達到同樣的效果:我們可以將同一個函式定義為一個method而不是一個計算屬性,對於最終的結果,兩種方式確實是相同的；

然而,計算屬性是基於他們的依賴就行快取的,計算屬性只有在它相關的依賴發生改變時才會重新求值,這意味著只要message 還沒有發生改變,多次訪問reversedMessage計算屬性會立刻返回之前計劃算的結果,而不必再次執行函式.

3:computed中的屬性;

計算屬性預設只有getter不過在需要時也可以提供一個setter;

var vm=new Vue({
 el:"#demo",data:{
 firstName:"foo",lastName:"Bar",fullName:"foo Bar"
},computed:{
 fullName:function(){
   get:function(){
     return this.firstName+" "+this.lastName;
   },setter:function(){
     var names=newValue.split('');
     this.firstName=names[0];
     this.lastName=names[names.length-1]
   }
 }
}
});

到此這篇關於Vue computed 計算屬性程式碼例項的文章就介紹到這了,更多相關Vue之computed 計算屬性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！