vue中对时间戳的处理方式

目录
  • vue对时间戳的处理
    • 1、自建js文件
    • 2、在组件模板中引用定义好的时间戳函数
    • 3、设置好在script中的引用和定义
  • vue时间戳转换

vue对时间戳的处理

1、自建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);
};

2、在组件模板中引用定义好的时间戳函数

<template>
    <div>{{time | formatDate}}</div>
</template>

3、设置好在script中的引用和定义

<script>
import {formatDate} from 'xxx.js';
export default {
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    }
}
</script>

vue时间戳转换

后台拿时间数据，一般不是时间格式，而是一串数组，这个时候就需要转换，然后才可以使用了

 add_time(row, column, cellValue, index) {
        if (cellValue == null || cellValue == "") return "";
        let date = new Date(parseInt(cellValue) * 1000);
        let Y = date.getFullYear() + '-';
        let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
        let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
        let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
        let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
        let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return Y + M + D;
      },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue过滤器filters的用法及时间戳转换问题

    Vue过滤器filters的用法及时间戳转换问题

    目录 一.速识概念: 二.局部过滤器: 三.全局过滤器: 四.扩展: 五.总结: 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换>,作者:北极光之夜.. 一.速识概念: 大家好呀,Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法~ 按照官方的活来说,Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

  • vue如何使用moment处理时间戳转换成日期或时间格式

    vue如何使用moment处理时间戳转换成日期或时间格式

    目录 一.使用环境 二.安装moment 三.在vue所需页面进行引入 五.最终效果 六.moment中文官网 总结 一.使用环境 Moment 被设计为在浏览器和 Node.js 中都能工作. 所有的代码都应该在这两种环境中都可以工作,并且所有的单元测试都应该在这两种环境中运行. CI 系统当前使用以下的浏览器:Windows XP 上的 Chrome,Windows 7 上的 IE 8.9 和 10,Windows 10 上的 IE 11,Linux 上最新的 Firefox,OSX 10.

  • vue将后台数据时间戳转换成日期格式

    vue将后台数据时间戳转换成日期格式

    前言 在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况 不同组件多次使用的话,那么建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用 在组件中使用 <template> <div> <p>{{date1 | formatDate}}</p> <p>{{date1 | formatDate2}}</p> <p>{{date1 | formatDate3}}</

  • vue获取时间戳转换为日期格式代码实例

    vue获取时间戳转换为日期格式. 方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi): // date.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }

  • vue3时间戳转换（不使用过滤器）

     vue2转换时间戳的时候一般使用过滤器的方式,到vue3之后,vue3移除了过滤器,就不能再用了,官方是推荐使用方法或者计算属性的方式. 下面写了一个Time.ts的文件,可以针对时间戳进行转换: class Time { // 格式化时间 public formatTime(time: number) { let date = new Date(time * 1000); let year = date.getFullYear(); let month = date.getMonth() +

  • vue中根据时间戳判断对应的时间(今天 昨天 前天)

    根据时间戳 来显示对应的时间段 本文是根据vue缩写,但是原理都是想通的 根据一个时间戳,然后来显示对应的时间段.如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天.剩下的显示为对应的日期 需求定义好了,然后开始实现: 首先,是把时间戳转换为对应的时间格式,js提供了原生的获取对应年.月.日等格式的方法,但是不够灵活,这里提供了一个网上找的比较灵活获取固定格式的函数. const formatDate = (date, fmt) => { date = new

  • Vue.js 时间转换代码及时间戳转时间字符串

    Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()

  • vue中对时间戳的处理方式

    目录 vue对时间戳的处理 1.自建js文件 2.在组件模板中引用定义好的时间戳函数 3.设置好在script中的引用和定义 vue时间戳转换 vue对时间戳的处理 1.自建js文件 文件位置根据自己的项目位置自定义 export function formatDate(date, fmt) {     if (/(y+)/.test(fmt)) {         fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 -

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • vue中使用Axios最佳实践方式

    目录 1.前言 2.使用 2.1安装 2.2基本用例 2.2.1 get请求 2.2.2post请求 3.配置 3.1语法 3.2别名 4.Axios实例 4.1语法 4.2请求配置 4.3响应的配置 配置的优先级 5.拦截器 6.错误拦截 7.取消请求 8.完整封装 建立http.ts文件编写clas Http类 9.总结 1.前言 最近在写vue3的项目,需要重新搭建脚手架并且使用网络请求接口,对于js的网络请求接口的一般有几种常用的方式: fetch XMLHttpRequests aja

  • vue中路由跳转的方式有哪些你知道吗

    目录 第一种方式:router-link (声明式路由) 第二种方式:router.push(编程式路由) 第三种方式:this.$router.push() (函数里面调用) 第四种方式:this.$router.replace() (用法同上,push) 参考: 总结 第一种方式:router-link (声明式路由) 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/

  • vue中this.$parent的使用方式

    目录 vue组件this.$parent 一.在实例中 二.在组件中调用组件 vue子组件this.$parent调用父组件方法报错 TypeError:this.parent.xxx is not a function 或者将子组件移到 UI 组件外面也可以调用到 vue组件this.$parent 在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件) 一.在实例中 thi

  • Vue中使用eslint和editorconfig方式

    目录 使用eslint和editorconfig方式 使用eslint的好处 安装eslint 文件配置说明 启动命令配置 自动检查语法配置 添加editorconfig vue editorconfig编辑器配置说明 editorconfig是什么,有什么用 editorconfig示例 检查是否生效 Editorconfig 插件 使用eslint和editorconfig方式 使用eslint的好处 1.避免运行时因格式问题报错 2.方便团队合作,代码风格统一 安装eslint 命令行执行

  • Vue中自定义标签及其使用方式

    Vue中自定义标签及其使用方式

    目录 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入 申明使用 使用 整个代码 效果 问题 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否我们也可以自己编写并且调用呢? 这里我将要讲解我在自定义标签方面的使用. 需求 这里我想要建一个名叫:<test>的组件. 功能是:组成两个按钮,且两个按钮颜色不同. 注意:这里的组件名.功能都是可以自定义的,按自己需求来取舍. 自定义 创建组件的vue文件 我们更目录设置为s

随机推荐