Vue格式化时间显示样式
Vue 时间 显示 格式化 样式
2023-06-13 09:14:00 时间
自定义显示时间
- 首先在main.js中添加以下代码
Vue.filter('date', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
// yyyy-mm-dd hh:mm:ss
// return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
return `${y}-${m}-${d}`
})
2.或者添加以下代码(看个人喜好)
Vue.filter("date", function(value) {
return dayjs(value).format("YYYY-MM-DD");
});
Vue.filter("year", function(value) {
return dayjs(value).format("YYYY");
});
Vue.filter("hour", function(value) {
return dayjs(value).format("HH:mm:ss");
});
3.配置完成以后,在需要指定自定义时间显示格式代码中添加
{{ scope.row.createTime | date }}
这样配置就ok了。
相关文章
- vue中时间戳转日期格式化的方法(一看就会)「建议收藏」
- VUE 基础语法(部分)
- Vue之Router(二)
- vue+element-ui 使用富文本编辑器
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue笔记(10) vue-router
- 你知道import Vue from 'vue' 吗?
- 能被“阿里爸爸”吹爆的SpringBoot+Vue全栈发手册到底多绝绝子?
- vue引入js文件并使用_css引入js
- vue自定义组件封装_vue组件的双向绑定实现
- vue跨域解决方案反向代理_怎么解决跨域问题
- Vue分页导航_vue分页组件
- vue-cli(vue脚手架)入门
- Vue全家桶介绍_vue全家桶有什么好处
- 前端vue面试题(持续更新中)_2023-02-27
- 开心档之Vue教程2
- 理解 Vue 生命周期钩子
- Vue 配置生产环境、测试环境和开发环境的请求
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Vue中触发Redis订阅通知(vue中订阅redis)