Vue2 过滤器

主要用于对文本内容的格式化

只能作用于插值表达式和 v-bind 属性绑定

私有过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span>{{ date | formatDate }}</span>

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {},
 filters: {
   formatDate(val) {
     return ;
    }
  }
})

‘|’ 是管道符，管道符左边的是需要渲染的源数据，右边的是过滤器函数

过滤器函数需要定义在 filters 节点中

过滤器函数规定有一个参数，这个参数永远都是管道符左边的源数据

页面渲染的数据是源数据经过过滤器函数处理 return 出去的数据

全局过滤器

一次声明，全局使用

1
2
3
Vue.filter('filterName', (val) => {
  return ; 
})

第一个参数为过滤器名称，第二个参数为过滤器函数

开发过程中一般都是定义全局过滤器

全局过滤器和私有过滤器名称冲突时，采用就近原则