Vue.js - Computed properties

Posted on   |  

Vue.js 的計算屬性(Computed properties)可以設定經過運算而來的屬性，有點類似其它程式語言的屬性(Property)，而一般的 Vue.js 屬性則是類似其它程式語言的欄位(Field)。


使用上只要在建構 Vue 建立時設定 computed 物件，裡面放置計算屬性的方法，這樣在使用計算屬性時就會去調用計算屬性定義的方法去運算。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
  ...
  {{<PropertyName>}}
  ...
</div>
...
<script>
  new Vue({
    el: '#app',
    data:{
      ...
    },
    computed: {
      <PropertyName>: function () {
        ...
      }
    }     
  })
</script>


像是下面這樣的程式，設定了 firstName 與 lastName 兩個屬性，並設定了名為 fullName 的計算屬性，其值為 firstName 與 lastName 用空格串接。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
  <title>Vue - Hello World</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{fullName}}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data:{
        firstName: "Larry",
        lastName:"Nung"
      },
      computed: {
        fullName: function () {
          return this.firstName + " " + this.lastName;
        }
      }     
    })
  </script>
</body>
</html>


運行起來不論 firstName 與 lastName 怎樣變動，都可以正確的顯示出 fullName。


如果需要將設定的值經過運算處理存回一般的屬性，可以設定計算屬性的 setter，只要在建構 Vue 建立實設定 computed 物件，裡面放置計算屬性的物件，計算屬性物件內設定 get 與 set 的方法，定義讀取與寫入資料要做的運算。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
  ...
  <input v-model="<PropertyName>">
  ...
</div>
...
<script>
  new Vue({
    el: '#app',
    data:{
      ...
    },
    computed: {
      <PropertyName>: {
        get: function () {
          ...
        },
        set: function (value) {
          ...
        }
      }
    }     
  })
</script>


像是下面這樣的程式，設定了 fullName 這個計算屬性，當該值被設定時會將資料切分到 firstName 與 lastName 這兩個屬性。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
  <title>Vue - Hello World</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="firstName">
    <input v-model="lastName">
    <p><input v-model="fullName"></p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data:{
        firstName: "",
        lastName:""
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + " " + this.lastName;
          },
          set: function (value) {
            var names = value.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
      }     
    })
  </script>
</body>
</html>


運行起來不論 fullName 怎樣變動，都可以正確的顯示出 firstName 與 lastName。