菜菜菜的 Vue 30天 - Day9

computed

好的，這篇文章所要介紹的是 computed，它是計算屬性，顧名思義就是一個被計算之後的屬性。

一樣直接來寫一些範例來介紹囉～

我們要做的是寫了一個 input 輸入數字，然後透過 computed 計算屬性來幫我們將輸入的數字乘以 2。

computed 在宣告的時候其實就跟 methods 很類似，一樣也是寫一個 function，然後裡面計算之後的值一定要回傳回來，才能夠做使用。

<div id="app">
  <input type="number">
  {{multiplyTwo}}
</div>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      number: 0
    },
    computed: {
      multiplyTwo() {
        return this.number * 2;
      }
    }
  })
</script>

結果就會是這樣：

get and set

上面是最基本也是最常用的用法，而 computed 其實還有其它用法。

我們也能夠將 computed 使用 object 的格式宣告，在裡面我們可以分別使用 get and set 2個方法。

get 的部分在我們上一個範例使用的其實就是 get，必須 return 一個值。

而 set 的部分跟 get 比較不一樣，我們可以反過來對 computed 計算出來的值做修改，在使用時我們需要再 set() 裡面傳入一個參數，這個參數就是你更改 computed 的值，接下來就可以指定要執行什麼事。

以下的範例我們就使用 get 計算輸入值*2，並且使用 set 反過來計算/2：

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      number: 0
    },
    computed: {
      multiplyTwo: {
        get() {
          return this.number * 2;
        },
        set(val) {
          this.number = val / 2;
        }
      }
    }
  })
</script>

結果就會是像下面這樣囉：

好咧～～ computed 就介紹到這邊，明天同一時間再見囉！！！