Vue 过滤器使用

1、过滤器

1.1 过滤器科用在两个地方：双花括号插值 和 v-bind 表达式 中。过滤器应该被添加在js表达式的尾部，由管道符号指示

// 双花括号中
{{ message | capitalize }}
// 在v-bind 中
<div v-bind:id=" rawId | formatId"></div>

1.2 定义过滤器

1.2.1在组件选项中定义本地过滤器

注意：过滤器的内容由过滤器的返回值决定

//  参数1：表示要过滤的内容
//  参数2：表示传递给过滤器的格式
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

1.2.2在创建Vue实例前定义全局过滤器

//  参数1：过滤器名称
//  参数2：过滤器的逻辑
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
  // ...
})

抽出filter过滤器作为全局过滤器

//  注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

1.2.3过滤器串联

//  message 的值将作为 参数 传入到函数 filterA 中，然后再将  filterA  的结果作为 参数 传递到  filterB  中
{{ message | filterA | filterB }}

1.2.4 接收多个参数的过滤器

//  filterA  被定义为接收三个参数的过滤器，其中 message、arg1、arg2作为表达式的三个参数
{{ message | filterA(arg1, arg2) }}

1.3抽离过滤器，定义到当个文件中

1.3.1 抽离过滤器到当个文件夹中

let dateServer = value => {
  return value.replace( /(\d{4})(\d{2})(\d{2})/g , '$1-$2-$3' )
}
export { dateServer }

1.3.2 在组件js中引入过滤器

import * as custom from './common/filters/custom'
// 导出的是对象，可以直接通过 key 和 value 来获得过滤器的名和过滤器的方法
Object.keys(custom).forEach(key => {
  Vue.filter(key, custom[key])
})

1.3.3 Vue组件中使用过滤器

<template>
  <section class="content">
    <p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
  </section>
</template>
<script>
  export default {
    data () {
      return {
        time: 20160101
      }
    }
  }
</script>