在实际项目开发中,在某一组件中声明的全局过滤器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. Shell变量的取用、删除、取代与替换

    <<鸟哥的私房菜>> 注意: 通配符适用的地方:shell命令行或者shell脚本中 正则表达式适用的地方:字符串处理时,一般有一般正则和Perl正则. 在文本过滤工具里,都是 ...

  2. 安装架设Apache+MySQL+PHP网站环境

    转载自 http://blog.sina.com.cn/s/blog_c02ed6590101d2sl.html 并进行了个人编辑整理 一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终 ...

  3. 类的内置方法__attr__介绍

    1.hasattr  getaddr  setaddr delattr 这四个函数同样也适用于类 class BlackMedium: feture="Ugly" def __in ...

  4. sns.pairplot

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  5. BootStrap的表格加载json数据,并且可以搜索,选择

    2018.4.11日更新,8号的时候我推荐去官网下载,但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何...然后我尝试着更换 ...

  6. This dependency was not found: * !!vue-style-loader!css-loader?

    npm install stylus-loader css-loader style-loader --save-dev 猜测这两个组件发布时是不需要的,所以要加上-dev

  7. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  8. “微信小程序商城构建全栈应用”开发小记

    注意事项: 1.application\api\extra下的wx.php记得填写小程序的app_id.app_secret: 2.API测试小工具需要APPID:

  9. python线程,pipe管道通信原理

    Pipe管道: * 管道实例化后会产生两个通道,分别交给两个进程* 通过send和recv来交互数据,这是一个双向的管道,child和parent可以互相收发 from multiprocessing ...

  10. vue插件开发实践与要点

    其实就跟组件差不多意思,组件也可以实现相关的效果,但要在用到的地方都引用插件就可以全局注册,不需引用 试着撸一个插件,有2个功能,提示和对话框 网上找了个toast插件的代码,改了改,扩展加了个dia ...