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>
