過濾器使用，直接上程式碼

<template>
  <div class="filters">
    <h1 v-text="filtersTitle"></h1>
    <input v-model="filtersText"/>
    <div>{{filtersText | filtersTextChange}}</div>
  </div>
</template>
<script>
  let vm = {};
  export default {
    data() {
      vm = this;
      return {
        filtersTitle: 'vue過濾器學習，filters',
        arrayList: [
          {
            "code": "1",
            "value": "北京市"
          },
          {
            "code": "2",
            "value": "上海市"
          },
          {
            "code": "3",
            "value": "廣州市"
          },
          {
            "code": "4",
            "value": "深圳市"
          },
          {
            "code": "5",
            "value": "杭州市"
          },
          {
            "code": "6",
            "value": "天津市"
          },
          {
            "code": "7",
            "value": "西安市"
          },
          {
            "code": "8",
            "value": "武漢市"
          },
          {
            "code": "9",
            "value": "長沙市"
          }
        ],
        filtersText: '1',
      }
    },
    filters: {
      filtersTextChange: function (dataStr) {
        let arrayList = vm.arrayList;
        let value = '沒有這個城市 ';
        for (let b of arrayList) {
          if (b.code == dataStr) {
            value = b.value;
            break;
          }
        }
        return value;
      }
    }
  }
</script>
 

我只是做了一個簡單的過濾器的展示，定義了幾個屬性，之後根據input裡面值的變化同時更新下面div裡面值的變化，其中vm的定義是為了在過濾器裡面呼叫arrayLIst這個變數，才在上面定義了一個vm獲取到這裡面的值，實現效果如圖所示