定义自定义过滤器,可以使用的两个地方为插值表达式{{}}中与v-bind表达式中,我们可以定义为全局过滤器和局部过滤器。全局过滤器使用的是Vue.filter(),局部过滤器使用的是filters: {}。全局过滤器需要定义在new Vue()之前。可以同时使用多个过滤器,调用顺序由左到右。
过滤器是 JavaScript 函数,因此可以接收参数,过滤器第一个参数默认为要过滤的数,第二个参数开始才是调用过滤器时传入的参数,如下面案例partFilter函数,partFilter(value, a) value默认为item.name,a接受传入的实参‘一月’。
案例:页面显示英文月份,所有字母小写,如果为一月转换成汉字‘一月’
代码:
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item.id">{{item.name | myfilter | partFilter('一月')}}</li>
</ul>
</div>
</body>
<script>
//全局过滤器
Vue.filter("myfilter", function(value) {
return value.toLowerCase()
})
new Vue({
el: "#app",
data: {
list:[
{id: 1,
name: 'January'
},
{id: 2,
name: 'February'
},
{id: 3,
name: 'March'
}
]
},
// 局部过滤器
filters: {
partFilter(value, a) {
return value === 'january' ? a : value
}
}
})
</script>
项目中有用到的地方:当表格的每一行遍历渲染的时候,某列数据根据不同条件显示不同格式的时候,