vue----过滤器（filters）

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

作者：人生有点bug的程序员
来源：CSDN
原文：https://blog.csdn.net/qq_34237136/article/details/83892949
版权声明：本文为博主原创文章，转载请附上博文链接！