过滤器使用，直接上代码

---

<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获取到这里面的值，实现效果如图所示