在vue-cli中引用公共过滤器filter
在实际项目开发中,在某一组件中声明的全局过滤器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的更多相关文章
- ⑧javaWeb之在例子中学习(过滤器Filter)
前言 本系列 Servlet & JSP 学习系列[传送门]逐渐到了中期了,希望大家喜欢我写的,总结的点点滴滴- 今天我们来讲讲过滤器 你们的支持是我写博客的动力哦. 最近买了两本书,觉得大二 ...
- Vue 项目中添加全局过滤器以及全局混合mixin
可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue如何全局引用公共js
在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js) src/common/utils.js export def ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- 「Vue」Vue cli3中引用mui-ui问题及解决办法
1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.protot ...
- 在vue项目中引用element-ui时 让el-input 获取焦点的方法
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或 ...
随机推荐
- mysql 在linux下的启动
启动与停止 1.启动 MySQL安装完成后启动文件mysql在/etc/init.d目录下,在需要启动时运行下面命令即可. [root@test1 init.d]# /etc/init.d/mysql ...
- 在IIS6中配置html文件以ASPX方式工作
在IIS6中配置html文件以ASPX方式工作 由于IIS6的安全不断提高,如果你需要设置html文件以ASPX文件方式被执行.仅仅设置应用程序映射是不够的,还 需要修改一些其他设置. 如果你只修改了 ...
- Docker跨主机网络解决方案
前言:前面的部分一直都是单机跑docker,但实际生产环境不可能只用一台来跑.肯定会用到多台,因为他们都是内部私有ip,那么多台主机之间的容器如何通信?这个是个很头疼的问题!目前主流几种方法如下:1. ...
- WCF开发实战系列四:使用Windows服务发布WCF服务
WCF开发实战系列四:使用Windows服务发布WCF服务 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 上一篇文章中我们通过编写的控制台程序或WinForm程序来为本 ...
- shiro中自定义realm实现md5散列算法加密的模拟
shiro中自定义realm实现md5散列算法加密的模拟.首先:我这里是做了一下shiro 自定义realm散列模拟,并没有真正链接数据库,因为那样东西就更多了,相信学到shiro的人对连接数据库的一 ...
- js正则表达式【原】
js正则表达式 http://www.w3school.com.cn/js/js_obj_regexp.asp js常用正则表达式 我的自测样例 <HTML> <HEAD> & ...
- docker部署安装
docker采用Linux内核技术,所以只能运行在Linux上,所谓的windows平台是使用boot2Docker工具,boot2Docker是在VisualBox构建一个linux精简化环境. B ...
- Docker 入门 第三部分: 服务
目录 Docker 入门 第三部分: 服务 先决条件 介绍 你的第一个 docker-compose.yml 文件 docker-compose.yml 运行你新建的负载均衡应用 扩展应用程序 卸载应 ...
- 006、容器 What、Why、How(2018-12-21 周五)
参考https://www.cnblogs.com/CloudMan6/p/6751516.html What - 什么是容器? 容器是一种轻量级.可移植.自包含的软件打包技术,是应用 ...
- ScrollView match_parent不起作用
昨天在项目中遇到一个以前没遇到过的问题,就是ScrollView的match_parent不起作用了.所以记录一下 开始的时候我的布局是: <ScrollView android:layout_ ...