iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手初探 Vue系列 第 14

鐵人賽Day14 - Computed & Watch

接下來要來介紹 Vue 裡面的 computed(計算)& watch(監聽)
computed 的運用上,是我們要返回某個值且顯示到頁面上,會用到的
舉個例子,一樣先建構 Vue 的架構跟資料狀態:

<script>
var app = new Vue({
  el: '#app',
  data: {
    arrayData: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '漂亮阿姨',
        age: 24
      },
      {
        name: '杰倫',
        age: 20
      }
    ],
    filterText: '',
    trigger: false,
    newDate: 0
  }
});
</script>

我們一樣來過濾資料,但這次不採用點擊任何按鈕的方式,我們要在 input 欄位內輸入文字時,就可以把那筆資料撈出來:

  <input type="text" class="form-control">
  <ul>
    <li v-for="(item, key) in arrayData" :key="item.age">
      {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
    </li>
  </ul> 

正常這樣寫,我們就可以把每筆資料都顯示出來,但是為了要做到過濾功能,我們就可以使用 computed 功能來幫忙,
我們先在 input 元素上綁定先定義好的 filterText 資料,接著把 arrayData 換成 filterArray,不同於前面的是,這次 filterArray 已經不是我們先定義好的變數了,我們要藉由 computed 來產生,完成之後會如下:

  <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> 

接著我們要在 Vue 裡面的 data 下方,增加一個 computed,並把要呈現的 filterArray 寫成一個 function 接著我們會 return 我們要的值,而要 return 的值,就是符合 filterText 的文字的資料,這時候一樣可以用到 .filter().match() 如下:

var app = new Vue({
    el: '#app',
    data: {},
    computed: {
        filterArray: function(){
            var vm = this;
            return vm.arrayData.filter(function(item){
                return item.name.match(vm.filterText);
            });
        }
    }
});

這個時候就會發現,功能已經如我們預期的完成了

接下來是 watchwatch 的運用上,是當我們監聽某個資料,當有變動時就會執行 function
一樣來個例子:

  <div class="box" :class="{'rotate': trigger }"></div>
  <button class="btn btn-outline-primary" @click="trigger = 'true'">Counter</button>

前面我們已經有先定義好 trigger 這個變數了,當我們點擊按鈕時,trigger 會變成 true.box 會增加 .rotate 這個 class
而我們要監聽的就是 trigger 這個變數資料,我希望 3 秒之後,他的資料狀態回到 false 狀態
這時候在 Vue 裡面除了先前的 datacomputed 之外,也需要增加一個 watch 了,而我們要監聽的就是 trigger 所以寫一個當 trigger 資料變動時要執行的 function

var app = new Vue({
    el: '#app',
    data: {},
    computed: {},
    watch: {
        trigger: function(){
            var vm = this;
            setTimeout(function(){
                vm.trigger = false
            },3000);
        }
    }
});

這時候當我們第一次點擊按鈕時,trigger 的資料狀態會變為 true3 秒之後就會變回去 false


上一篇
鐵人賽Day13 - v-if 使用細節
下一篇
鐵人賽Day16 - Vue.js 基礎元件認識
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言