Vue过滤器

Vue中的过滤器

1.过滤器的全局定义语法

Vue.filter('过滤器的名称',function(){})

2.过滤器中的fn

第一个参数：过滤器管道符前面传递过来的数据

后面可以一直添加传入参数

Vue.filter('过滤器的名称',function(data,str1,str2,...){
    return data+'123'
})

3.过滤器使用

<div id="box">
    <p>{{message|msg('邪恶')}}</p>
  </div>
  <script>
    Vue.filter('msg', function (message, msg) {
      // replaceAll
      return message.replaceAll('单纯', msg)
      //正则
      // return message.replace(/单纯/g, '邪恶')
    })
    var app = new Vue({
      el: '#box',
      data: {
        message: '可惜了,如此单纯的单纯男孩,为什么会如此单纯'
      }
    })
</script>

过滤器可以多次调用，传多个参

4.自定义私有过滤器

定义在外面的而过滤器可以作用于多个Vue实例化对象

如何定义一个私有过滤器？

var app = new Vue(){
	el:{},
    data:{},
    methods:{},
    filters:{
        //定义私有过滤器【过滤器名称：处理函数】
        dataFormat:function(dataStr){}
    },
}

过滤器调用过程：就近原则，私有过滤器和全局过滤器名称一致，优先调用私有过滤器