Vue (2) - methods、computed、watch 的使用情境

PV:

computed

  • computed 方法，會將結果直接回傳存到變數裡面，而且這個變數可以直接使用在畫面上。在 computed 內的任何屬性都是 function 。 原始 data 結構的值若更動時，computed 裡面的值才會跟著更動。- computed 是在監控資料更動後，重新運算結果呈現於畫面上，一般來說不會修改資料，只會回傳用於畫面呈現的資料。- methods 就是互動的函式，需要觸發才會運作會用來修改資料內容

  • methods 就是互動的函式，需要觸發才會運作
    會用來修改資料內容

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

<div id="app">
          <input type="text" class="form-control" v-model="text">
          <button class="btn btn-primary mt-1">反轉字串</button>
          <div class="mt-3">
            <!-- {{ text.split('').reverse().join('') }}  表達式太冗長可以直接代替成computed裡的屬性結果會相同-->
            {{reverseText}}
          </div>
          {{reverseText}}
        </div>
</div>

 var app = new Vue({
            el: '#app',
            data: {
              text: '',
              newText: ''
            },
            // 請在此撰寫 JavaScript
            computed: {
              reverseText: function () {
                return this.text.split('').reverse().join('');


              }
            },
          });

過濾陣列資料，運用 computed 取代 methods

computed 是針對輸出到畫面上的內容，輸出前預先處理。資料可以透過括號與表達式呈現，但數量一多就不容易管理。因此透過變數直接將運算結果呈現在畫面上，是另一種作法。而透過事件觸發則是另一種

  • arrayData(原始資料結構)
  • item 裡面的個別資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h4>Computed</h4>
       <p>使用 Computed 來過濾資料。</p>
       <input type="text" class="form-control" v-model="filterText">
       <ul>
         <li v-for="(item, key) in filterArray" :key="item.age">
           {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
         </li>
       </ul>
       <p>使用 Computed 來呈現時間格式。</p>
       <p>
         {{formatTime}}
       </p>
       <h4>Watch</h4>
       <p>使用 trigger 來觸發旋轉 box、並在三秒後改變回來</p>
       <div class="box" :class="{'rotate': trigger }"></div>
       <hr>
       <button class="btn btn-outline-primary" @click="trigger=true">Counter</button>
     </div>
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
var app = new Vue({
            el: '#app',
            data: {
              arrayData: [{
                  name: '小明',
                  age: 16
                },
                {
                  name: '漂亮阿姨',
                  age: 24
                },
                {
                  name: '杰倫',
                  age: 20
                }
              ],
              filterText: '', //過濾資料並重新繪製
              trigger: false, //按下 couter 按鈕後讓畫面產生變化
              newDate: 0 // 運用 timestamp
            },
            computed: {
            filterArray: function () {
                 var vm = this;
                 return vm.arrayData.filter(function(item) {
                   return item.name.match(vm.filterText);
                 });
               }

            })
1
2
3
4
5
6
7
8
9
<style>
         .box {
           transition: all .5s;
         }

         .box.rotate {
           transform: rotate(45deg)
         }
       </style>

使用 Computed 來呈現時間格式

  • 畫面運行完才會執行 mounted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h4>Computed</h4>
       <p>使用 Computed 來過濾資料。</p>
       <input type="text" class="form-control" v-model="filterText">
       <ul>
         <li v-for="(item, key) in filterArray" :key="item.age">
           {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
         </li>
       </ul>
       <p>使用 Computed 來呈現時間格式。</p>
       <p>
         {{formatTime}}
       </p>
       <h4>Watch</h4>
       <p>使用 trigger 來觸發旋轉 box、並在三秒後改變回來</p>
       <div class="box" :class="{'rotate': trigger }"></div>
       <hr>
       <button class="btn btn-outline-primary" @click="trigger=true">Counter</button>
     </div>
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
36
37
38
39
40
41
42
43
44
45
var app = new Vue({
            el: '#app',
            data: {
              arrayData: [{
                  name: '小明',
                  age: 16
                },
                {
                  name: '漂亮阿姨',
                  age: 24
                },
                {
                  name: '杰倫',
                  age: 20
                }
              ],
              filterText: '', //過濾資料並重新繪製
              trigger: false, //按下 couter 按鈕後讓畫面產生變化
              newDate: 0 // 運用 timestamp
            },
            computed: {
            filterArray: function () {
                 var vm = this;
                 return vm.arrayData.filter(function(item) {
                   return item.name.match(vm.filterText);
                 });
               },
               formatTime: function () {

                console.log(this.newDate)
                var dates = new Date(this.newDate * 1000);
                var year = dates.getFullYear();
                var month = dates.getMonth() + 1;
                var date = dates.getDate() + 1;
                var hours = dates.getHours();
                var minutes = dates.getMinutes();
                var seconds = dates.getSeconds();
                return `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`
              }},

mounted: function () {
              this.newDate = Math.floor(Date.now() / 1000);
            }

            })
1
2
3
4
5
6
7
8
9
<style>
         .box {
           transition: all .5s;
         }

         .box.rotate {
           transform: rotate(45deg)
         }
       </style>

watch

監控特定變數，當變數變化的時候，執行特定事件。以下範例是 trigger 變化的時候監控 trigger。並在 3 秒後將 trigger 再改為 false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h4>Computed</h4>
       <p>使用 Computed 來過濾資料。</p>
       <input type="text" class="form-control" v-model="filterText">
       <ul>
         <li v-for="(item, key) in filterArray" :key="item.age">
           {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
         </li>
       </ul>
       <p>使用 Computed 來呈現時間格式。</p>
       <p>
         {{formatTime}}
       </p>
       <h4>Watch</h4>
       <p>使用 trigger 來觸發旋轉 box、並在三秒後改變回來</p>
       <div class="box" :class="{'rotate': trigger }"></div>
       <hr>
       <button class="btn btn-outline-primary" @click="trigger=true">Counter</button>
     </div>
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
var app = new Vue({
            el: '#app',
            data: {
              arrayData: [{
                  name: '小明',
                  age: 16
                },
                {
                  name: '漂亮阿姨',
                  age: 24
                },
                {
                  name: '杰倫',
                  age: 20
                }
              ],
              filterText: '', //過濾資料並重新繪製
              trigger: false, //按下 couter 按鈕後讓畫面產生變化
              newDate: 0 // 運用 timestamp
            },
             watch: {
              trigger: function () {
                var vm = this;
                setTimeout(() => {
                  vm.trigger = false
                }, 3000)
              }
            }

            })
1
2
3
4
5
6
7
8
9
<style>
         .box {
           transition: all .5s;
         }

         .box.rotate {
           transform: rotate(45deg)
         }
       </style>

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :