vue 日期时间过滤器
来自:https://blog.csdn.net/m0_37068028/article/details/72898154 侵删
来自:https://segmentfault.com/a/1190000010378259 侵删
第一种:
- // template
- {{date | formatDate}}
- //script
import {formatDate} from '../../common/js/date'
filters: {
formatDate (time) {
let date = new Date(time) return formatDate(date, 'yyyy-MM-dd hh:mm')
}
}
//date.js
export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero (str) {
return ('00' + str).substr(str.length)
}
第二种:
npm install moment --save
main.js 中
import moment from 'moment/moment'添加过滤器:
- Vue.filter('moment', function (value, formatString) {
- formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
- // return moment(value).format(formatString); // value可以是普通日期 20170723
- return moment.unix(value).format(formatString); // 这是时间戳转时间
- });
- /* eslint-disable no-new */
- new Vue({
- el: '#app',
- template: '<App/>',
- components: { App }
- })
页面中使用
- <template>
- <div id="app">
- <div>
- {{ datetime | moment }}
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'app',
- data () {
- return {
- datetime: '1500799859'
- }
- }
- }
- </script>
结果:
2017-07-23 16:50:59
vue 日期时间过滤器的更多相关文章
- vue 日期格式化过滤器
formateDate日期格式化,写在公共的js中: export function formateDate(date, fmt){ if ('/(y+)/'.test(fmt){ fmt = fmt ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- vue使用日期时间插件layDate
项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...
- 关于 vue 日期格式的过滤
最近也在写公司几个单独页面,数据量比较,让前端来做,还不让angular,jquery? no no no~ 对于一个前端来说绑数据那么麻烦的一款 “经典的老东西“ ,我才不用, SO~ vue ...
- Vue2.0如何自定义时间过滤器
我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下: 我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现 ...
- ASP.NET MVC下使用AngularJs语言(九):日期时间处理与显示
当在angularjs去显示一个时间时,如原原本本去显示这个值,它将显示一个怪怪的字符串,其实它就是被系列化json之后的字符串.如:一个空值显示为日期时间: 如果非空值显示为日期时间的情形: 为了能 ...
- vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
- EasyUI datagrid 日期时间格式化
EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...
随机推荐
- 微服务架构 - 离线部署k8s平台并部署测试实例
一般在公司部署或者真实环境部署k8s平台,很有可能是内网环境,也即意味着是无法连接互联网的环境,这时就需要离线部署k8s平台.在此整理离线部署k8s的步骤,分享给大家,有什么不足之处,欢迎指正. 1. ...
- “==”、“equals()”、“hashcode()”之间的秘密
前言 万丈高楼平地起,今天的聊点基础而又经常让人忽视的话题,比如“==”与“equals()”区别?为何当我们重写完"equals()"后也要有必要去重写"hashcod ...
- 游戏服务器h2engine架构优化和跨平台设计
H2engine的GitHub星星不知不觉已经破百了,也没有特意推广过,但是慢慢的关注的人越来越多.因为事情多,好久没有写东西了,前一段时间有了一些想法,把h2engine又更新了一下,感觉h2eng ...
- [PHP] 使用反射实现的控制反转
搬家进程中反射实现控制反转,样做的好处是可以通过配置项动态的控制下面那个类的属性 1.$this->getObject($class, $config->getConfig('param' ...
- 动态路由协议(RIP)
虽然静态路由在某些时刻很有用,但是必须手工配置每条路由条目,对于大中型的网络或拓补经常发生变化的清空,配置和维护静态路由的工作量就变得非常繁重,而且不小心还容易出错,因此就需要一种不需要手工配置的路由 ...
- 驰骋工作流引擎-底层开发API 说明文档
驰骋工作引擎-底层开发API 登录与门户API 首先要进行代码集成与组织机构的集成 其次在自己的系统登录界面,登录成功后要执行ccbpm的框架登录. 所谓的登录就是调用ccbpm的登录接口,如左边的代 ...
- Ambari自定义Service
一.Ambari基本架构 img016.jpg Ambari Server 会读取 Stack 和 Service 的配置文件.当用 Ambari 创建服务的时候,Ambari Server 传送 ...
- spring集成shiro登陆流程(上)
上一篇已经分析了shiro的入口filter是SpringShiroFilter, 那么它的doFilter在哪儿呢? 我们看到它的直接父类AbstractShrioFilter继承了OncePerR ...
- 跟我一起学opencv 第三课之图像在opencv中的表示-Mat对象
1.下面第一章图是一位美女图像,和其他数据一样图像在计算机中也是以二进制存储,下面第二张图 2.在摄像头眼里一幅图像就是一个矩阵或者说是二维数组,数组元素是像素值 3.opencv中以Mat对象表示图 ...
- Mysql监控工具介绍-Monyog
MONyog监控工具 MONyog是一个优秀的MySQL监控工具,可以实时监测MYSQL服务器,查看MySQL服务器的运行状态. 支持查询分析功能,能够轻松找出有MySQL的问题所在,此外,还可以帮助 ...