VUE时间戳和时间相互转换,使用UI库为Ant Design of Vue
1.时间戳获取方法
2.时间转换时间戳
2.1当前时间转化为时间戳格式
2.2定义过滤器并导出,便于后续循环使用
定义过滤器
export const timeFormat = (times) => {
const result = times?.map((item) => {
return item ? moment(item / 1000).valueOf() : null;
});
return result;
};
main.js引入并绑定到原型
import { formDate } from "@/utils/filters";
Vue.prototype.config = {
timeFormat,
};
组件内使用
values.create_time = this.config.timeFormat(values.create_time);
3.时间戳转化为时间格式
3.1定义过滤器并导出,便于后续循环使用
export const formDate = function(value) {
if (!value) return " ";
let date = new Date(value * 1000);
let year = date.getFullYear(); // 获取完整的年份(4位,1970)
let month = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
let day = date.getDate(); // 获取日(1-31)
let hour = date.getHours(); // 获取小时数(0-23)
let min = date.getMinutes(); //分
let sec = date.getSeconds(); //秒
return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
};
3.2main.js定义过滤器(filter)
import { formDate } from "@/utils/filters";
Vue.filter("formDate", formDate);
3.3需要组件内直接使用
VUE时间戳和时间相互转换,使用UI库为Ant Design of Vue相关推荐
- Vue框架中常见的前端UI库
前言 Vue旗下有很多衍生的UI框架,它们能够很好的提高前端工程师开发效率.今天在这里,笔者做一个整理.将UI框架分为PC和Mobile两大类,并逐一展示 PC版UI库 Element Element ...
- 标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态 因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
- Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据 源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
- ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标 在src/ ...
- 基于Ant Design of Vue实现时长组件 duration
最近遇到一个需求,需要一个输入时长的组件,在经过一番寻找后没有合适的,最终自己动手写一个(实现了v-model双向绑定),记录一下,也给小伙伴们提供一个方便. 本示例基于ant design of v ...
- 使用Ant Design 和Vue,React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
- 创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目 创建项目 选择配置 运行项目 安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开 配置 ...
- ant design of vue分页/layui实现分页
ant design of vue分页 官方文档:https://www.antdv.com/components/pagination-cn/ 结果: 代码: <a-paginationv-i ...
- React学习21----React UI框架Antd(Ant Design)的基本使用
Ant Design 现在支持:react,angular,vue 3个框架 官网地址: https://ant.design/index-cn 具体使用: 1.antd官网: https://ant ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
最新文章
- dockerfile php-fpm,1、使用dockerfile制作nginx+php-fpm镜像,实现lnmp。
- 2021年软考考试时间公布
- Delphi动态数组详解
- 用C#创建COM组件全过程
- 在html中超链接_4.html5中超链接
- PHP require和include的区别
- 中年高校教师、行政人员的21个特征!
- 浏览器多代理配置 - SwitchyOmega
- nvm-windows 安装后,node 命令报错
- 26岁辞职、365天创业,就让程序员任性一回
- Android Wifi 调试
- 如何在Excel里输入可以打钩的选择框?
- LGTM、FYI等项目开发用语,缩略语,感觉其他组员都知道,感觉就自己不知道,不好意问的就看这里把
- [week15] ZJM 与霍格沃兹 —— 字符串哈希
- 一个2022本科生的秋招总结 (大疆、Arm、小米、荣耀、美团、联发科等)
- android 获取方法名,Android获取渠道名称
- 5 实战1—利用Python获取新闻网页源代码
- 电脑分区合并——灰色解决方法
- 润乾报表学习一:制作最简单的报表
- 【并发】Amdahl's Law 阿姆达尔定律