Vue过滤器

154 阅读1分钟

vue中的过滤器分为两种:局部过滤器和全局过滤器

一、局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域

代码示例

filters:{
    newFiler:function(data){
    return data+'我是局部的过滤器'
 }
}

二、全局过滤器

全局过滤器分为有参过滤器和无参过滤器

  1. 无参过滤器 代码示例
 Vue.filter('msgFormat', function(msg) {  
        // msg 为固定的参数 即是你需要过滤的数据
        //第一个参数:过滤器名字
        //第二个参数:一个处理函数, 这个函数有一个默认参数,这个默认参数表示你需要过滤的数据,如果你还传了一个参数,那么这个参数对应的实际上是上面使用过滤器时的第一个参数
        return msg.replace(/需要替换的内容/g, 'xxx')
})
  1. 有参过滤器

代码示例

 // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
   Vue.filter('msgFormat', function(msg, arg, arg2) {
       // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
         return msg.replace(/内容/g, arg+arg2)
   })