計算屬性 Computed

今天來介紹的是 computed 這個方法，能夠直接將結果存到變數之中，並且是可以直接使用的，直接來看下面的範例會比較清楚唷！

<div id="app">
    {{ someText }}
</div>

new Vue({
  el: '#app',
  data: {
      
  },
  computed: {
      someText: function() {
        return 'Hello Vue';
      }
  }
})

這裡可以看到，我們在 Vue 的應用程式中建立了一個 computed 的物件，並在物件裡面建立方法，而方法中一定要 return 結果，這樣才能直接使用這個變數，如果打開頁面你會看到 'Hello Vue' 出現在頁面上。

接下來我們來看一個反轉字串的例子：
我們可以在 {{ }} 內撰寫表達式來作運算，並且呈現運算過後的資料結果。這裡也有利用的雙向綁定的特性，只要在輸入框內輸入內容，下方的段落就會即時更新唷！

<div id="app">
  <input type="text" v-model="msg">
  <p>
    {{msg.split('').reverse().join('')}}
  </p>
</div>

new Vue({
  el: '#app',
  data: {
      msg: 'Hello World'
  },
})

但是在 HTML 中運算並不是太理想，是不是有點眼花撩亂而且不便於維護與使用，這時可以利用 computed 的方法來改寫。

<div id="app">
  <input type="text" v-model="msg">
  <p>
    {{reverseText}}
  </p>
</div>

new Vue({
  el: '#app',
  data: {
      msg: 'Hello World'
  },
  computed: {
      reverseText: function() {
        return this.msg.split('').reverse().join('')
    }
  }
})

這樣的結果跟上面的是一樣的唷！不過這裡有一點需要特別注意的是，在 computed 裡若是需要取用到 data 裡的資料的話式需要加上 this 的，否則會沒辦法正確取用，而 computed 的計算方式是，如果所取用的 data 裡的資料有變動的時候，就會自動計算，若沒有取用到 data 裡的資料的話是不會自動計算的，這點需要特別注意。

那麼，明天再見囉！