vue-过滤器filter

vue-过滤器filter vue的过滤器通常在JavaScript 表达式的尾部，由“|”符号指示： 过滤器能够让咱们的代码更加优美，通常能够用在时间格式化，首字母大写等等。
例如：{{ date | dateFormat }}这是过滤器的写法；{{ dateFormat(date) }}这是函数调用的写法 能够看出过滤器的写法更加语义化，让人一眼能够看出它的含义。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 也能够串联多个过滤器 -->
{{ message | filterA | filterB }}
// 在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将做为参数传入到函数中。而后继续调用一样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中

<!-- 过滤器接收参数 -->
{{ message | capitalize('string', obj) }}
// 这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message，即'string'为第二个参数，obj为第三个参数。

过滤器方法在接收到参数后，你能够在方法内进行一系列的处理，最终return出处理结果便可。
一、过滤器能够是组件内的

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

二、过滤器也能够是挂载在全局Vue里

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

转载于猿2048:➧《vue-过滤器filter》