首页 > 代码库 > Vue2 全局过滤器(vue-cli)
Vue2 全局过滤器(vue-cli)
先看官方简介:
当前组件注册:
export default { data () { return {} }, filters:{ orderBy (){ // doSomething }, uppercase () { // doSomething } } }
但是我们做项目来说,大部分的过滤器是要全局使用的,不会每每用到就在组件里面去写,嗯,还是抽成全局的会更好些。
全局注册:(官网https://cn.vuejs.org/v2/api/#filters)
1 // 注册 2 Vue.filter(‘my-filter‘, function (value) { 3 // 返回处理后的值 4 }) 5 6 // getter,返回已注册的过滤器 7 var myFilter = Vue.filter(‘my-filter‘)
当项目所用到的过滤器比较多时,就想试着把所有的方法定义在一个文件里面导出,嗯,毕竟还是有分点层次的。
/src/common/filters/custom.js
let dateServer = value =http://www.mamicode.com/> { return 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> <!-- 2016-01-01 --> </section> </template> <script> export default { data () { return { time: 20160101 } } } </script>
Vue2 全局过滤器(vue-cli)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。