vue中的过滤器分为两种:局部过滤器和全局过滤器
一、局部过滤器
局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域
代码示例
filters:{
newFiler:function(data){
return data+'我是局部的过滤器'
}
}
二、全局过滤器
全局过滤器分为有参过滤器和无参过滤器
- 无参过滤器 代码示例
Vue.filter('msgFormat', function(msg) {
// msg 为固定的参数 即是你需要过滤的数据
//第一个参数:过滤器名字
//第二个参数:一个处理函数, 这个函数有一个默认参数,这个默认参数表示你需要过滤的数据,如果你还传了一个参数,那么这个参数对应的实际上是上面使用过滤器时的第一个参数
return msg.replace(/需要替换的内容/g, 'xxx')
})
- 有参过滤器
代码示例
// 定义一个 Vue 全局的过滤器,名字叫做 msgFormat
Vue.filter('msgFormat', function(msg, arg, arg2) {
// 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
return msg.replace(/内容/g, arg+arg2)
})