在实际项目开发中,在某一组件中声明的全局过滤器Vue.filter并不能在其他组件中使用,所以,我认为只要调用两次以上或者可能会被调用两次以上的过滤器,就应该写入统一个过滤器文件中,方便统一调用。下面是如果创建并调用统一的过滤器的方法:

1.在公用js文件夹中新建文件filters.js

2.在filters.js中使用es6写法写入(因为我用的是vue-cli,自带babel组件一套,可以自动转换es6写法到es5,所以不用考虑兼容性)

let formatDate = time => {
if(time){
return time.slice(5,16)
}
}
export { formatDate }

3.找到main.js引入

import * as filters from './assets/js/filters.js'

Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})

4.在组件中使用

<h2>时间:<span>{{createTime | formatDate(createTime)}}</span></h2>

在vue-cli中引用公共过滤器filter的更多相关文章

  1. ⑧javaWeb之在例子中学习(过滤器Filter)

    前言 本系列 Servlet & JSP 学习系列[传送门]逐渐到了中期了,希望大家喜欢我写的,总结的点点滴滴- 今天我们来讲讲过滤器 你们的支持是我写博客的动力哦. 最近买了两本书,觉得大二 ...

  2. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  3. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  4. vue如何全局引用公共js

    在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js)  src/common/utils.js export def ...

  5. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  6. 「Vue」Vue cli3中引用mui-ui问题及解决办法

    1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.protot ...

  7. 在vue项目中引用element-ui时 让el-input 获取焦点的方法

    在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...

  8. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  9. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

随机推荐

  1. MYCAT扩容

    一.原架构图: 二.扩容 在HOST1上新增节点db_user2 在HOST2上新增节点db_user2 三.操作步骤 1.mycat 所在环境安装 mysql 客户端程序 2.mycat 的 lib ...

  2. 设计模式---单一职责模式之装饰模式(Decorator)

    前提:"单一职责"模式 在软件组件的设计中,如果责任划分的不清晰,使用继承,得到的结果往往是随着需求的变化,子类急剧膨胀,同时充斥着重复代码,这时候的关键是划清责任 典型模式(表现 ...

  3. mysql -- 索引补充

    .unique索引补充:联合唯一 unique(name,email)是name和email这两列联合起来唯一,不再试某个字段唯一 .主键索引,类似唯一索引,也是允许联合多个字段作为主键,例如:pri ...

  4. Spring架构简单描述

    原文:https://www.shiyanlou.com/courses/document/212 Spring 概述 1. Spring 是什么 Spring是一个开源的轻量级Java SE(Jav ...

  5. Hdu 5072 Coprime(容斥+同色三角形)

    原题链接 题意选出三个数,要求两两互质或是两两不互质.求有多少组这样的三个数. 分析 同色三角形n个点 每两个点连一条边(可以为红色或者黑色),求形成的三条边颜色相同的三角形的个数反面考虑这个问题,只 ...

  6. Windows 与 Linux下关于端口不能访问的问题

    自己写的一个HTTP文件服务器,在端口 50000上监听HTTP连接请求,在Eclipse里面将程序正常地启动之后,能够在自己的机器上(Eclipse启动该程序的机器上)访问 50000端口,即Fil ...

  7. [PageNofM]一直显示数字+0

    解决办法: Options->ReportOptions->DoublePass勾选即可

  8. MongoDB服务无法启动,windows提示发生服务特定错误:100

    MongoDB服务无法启动,windows提示发生服务特定错误:100   今天搞了下MongoDB,初上手,感觉体验不错! 但是当我想将它安装为windows 服务后,却怎么也启动不了.网上的解决办 ...

  9. Nginx 虚拟主机示例

    Nginx server 模块 server { // 标识虚拟主机开始 listen ; ## // 指定虚拟主机服务器端口 server_name localhost; // 指定 IP地址或者域 ...

  10. django错误笔记——TypeError: view must be a callable or a list/tuple in the case of include().解决办法

    django增加用户认证模块时,总是提醒模块的url.py中 url(r'^login/$', 'django.contrib.auth.views.login', name='login'),出错: ...