1 一般情况
官方注册过滤器的方式:
export default {
data () { return {} },
filters:{
orderBy (){
// doSomething
},
uppercase () {
// doSomething
}
}
}
但是我们做项目来说,大部分的过滤器是要全局使用的,不会每每用到就在组件里面去写,抽成全局的会
更好些。
官方注册全局的方式:
// 注册
Vue.filter( 'my-filter' , function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter( 'my-filter' )
但是分散写的话不美观,因此可以抽出成单独文件。
2 优化
我们可以抽出到独立文件,然后使用 Object.keys 在 main.js 入口统一注册
/src/common/filters.js
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3' )
export { dateServer }
/src/main.js
import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))
然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了
<template>
<section class= "content" >
<p>{{ time | dateServer }}</p>
</section>
</template>
<script>
export default {
data () {
return {
time: 20160101
}
}
}
</script>