在实际项目开发中,在某一组件中声明的全局过滤器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. ArrayList创建步骤及基本方法

    ArrayList创建变量的步骤 ArrayList ------>集合 1: 导入包 java.util.ArrayList包中 2: 创建引用类型的变量 数据类型< 集合存储的数据类型 ...

  2. kafka channle的应用案例

      kafka channle的应用案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近在新公司负责大数据平台的建设,平台搭建完毕后,需要将云平台(我们公司使用的Ucloud的 ...

  3. JavaSE学习总结(四)——Java面向对象十分钟入门

    面向对象编程(Object Oriented Programming,OOP)是一种计算机模拟人类的自然思维方式的编程架构技术,解决了传统结构化开发方法中客观世界描述工具与软件结构的不一致性问题.Ja ...

  4. C#星夜拾遗之delegate示例

    概念 delegate即委托.如果你使用过C++或者js中的回调函数,你会更容易明白一些.在异步操作中常常使用回调函数,例如在Ajax中,当HttpRequest执行异步请求时,就需要有一个状态改变时 ...

  5. Python探测主机端口是否存活

    #!/usr/bin/python3 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) result = s ...

  6. Shell + crontab 实现日志压缩归档

    Shell + crontab 实现日志压缩归档 crontab # archive the ats log days. */ * * * * root /bin/>& shell #! ...

  7. Java Web 自定义标签

    1.   自定义标签 由于在JSP页面中直接嵌入Java代码会导致页面开起来非常混乱,不方便和美工等配合工作,为此,JSP提供了自定义标签技术,可以代替直接嵌入Java代码的方式提供动态逻辑,但自定义 ...

  8. 2 Player and N Coin

    class Solution { public void printChoices(int[] A, int[][] C) { System.out.println("硬币列表如下:&quo ...

  9. Ubuntu18.04下vim的tab缩进设置为4个空格

    在/etc/vim/vimrc最后添加如下内容 set ts = 4 set exbandtab set autoindent

  10. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...