VUE全局定义filter

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>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容