关于vue中的时间格式转化问题

目录
  • vue时间格式转化问题
    • 1. 效果图
    • 2. 需求:前台展示一律用的时间规格
  • vue转换时间格式(适用于uni-app)
    • 1. 前端获取实时时间
    • 2. 运用过滤器

vue时间格式转化问题

1. 效果图

2. 需求:前台展示一律用的时间规格

yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0,这样显得整体化一。所以下面就是专门对月日时分秒小于10时做补0的处理,实际刚开始想到的就是直接挨个判断月日时分秒<10时,直接拼接0的想法,被同事打断了,这个方法太繁琐了。所以发现了以下简洁的方法,据说是es6中的函数用法,还没有去具体查询出处,先用着再说吧。接下来分析代码.

可以把它写在一个单独的js中,这样就可以写在公共方法里,大家都可以调用的那种,当然也可以写在你需要地方的方法里,按照自己的实际情况来

① 写在公共方法里

可以在工具文件夹底下新建一个data.js,如下:

代码部门:

其中Vue.prototype是将formatDate这个方法设置问全局方法,这样就都可以调用了,注意方法名名为formatDate,后面用

/**
 * Created by syp on 2020/5/15.
 */

exports.install = function (Vue, options) {
  Vue.prototype.formatDate = function (row, column) {
    let data = row[column.property]
    if (data == null) {
      return null
    }
    let dt = new Date(data)
    let yyyy = dt.getFullYear()
    let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
    let dd = dt.getDate().toString().padStart(2, '0')
    let h = dt.getHours().toString().padStart(2, '0')
    let m = dt.getMinutes().toString().padStart(2, '0')
    let s = dt.getSeconds().toString().padStart(2, '0')
    return yyyy + '-' + MM + '-' + dd + ' ' + h + ':' + m + ':' + s
  }
}

处理好data.js后,再在公共js中调用一下,设置为全局的,这样大家就都可以用了

然后在vue页面进行调用图:

:formatter="formatDate"

formatDate就是设置为全局方法的方法名

② 将它只是变为局部的格式化时间调用,那么就需要把格式化时间的代码放在调用页面的方法中

一下这个方法只需要放在本页面的method底下就好了

formatDate (row, column) {
        let data = row[column.property]
        if (data == null) {
          return null
        }
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
      },

在列表展示的熟悉中运用和上面一样都用:formatter="formatDate"就ok了。

图示:

vue转换时间格式(适用于uni-app)

1. 前端获取实时时间

<template>
	<view class="content">
		<view>{{date}}</view>
	</view>
</template>
<script>
	export default {
		data() {
			return{
					date: new Date()
			}
		},
		onLoad() {},
		mounted: function() {
			let that = this
			//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
			//每一毫秒调用一次
			that.timer = setInterval(function() {
				that.date = new Date();
			}, 1000)
		},
		beforeDestroy: function() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
		}
	}
</script>

获得国际标准时间

2. 运用过滤器

通过给Vue实例添加选项filters来设置,给时间格式化处理

<template>
    <view class="content">
        <view>{{date  | formatDate}}</view>
    </view>
</template>
<script>
    //一、时间转换关键
    var padDate = function(value) {
        return value < 10 ? '0' + value : value;
    };
    export default {
    //二、时间转换关键
        filters: {
            formatDate: function(value) {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth()+1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                return year + '-' + month + "-" + day + "  " + hours + ":" + minutes + ":" + seconds
            }
        },
        
        data() {
            return{
                date: new Date()
            }
        },
        onLoad() {},
        mounted: function() {
            let that = this
            //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
            //每一毫秒调用一次
            that.timer = setInterval(function() {
                that.date = new Date();
            }, 1000)
        },
        beforeDestroy: function() {
            if (this.timer) {
                clearInterval(this.timer)
            }
        },
        methods: {
        }
    }
</script>

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

(0)

相关推荐

  • vue 中常见的时间格式转换

    项目中后台返回的时间有多种形式,时间戳.ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 1.将2020-06-27T14:20:27.000000Z 时间格式转换成 2020-06-27 14:20:27 可以将方法定义为全局过滤器,或全局方法方便引用 Vue.filter('format', function(date) { var json_date = new Date(date).toJSON(); return new Date(new Date(json_date) +

  • vue中的过滤器及其时间格式化问题

    一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId">

  • vue将时间戳转换成自定义时间格式的方法

    1.首先建立一个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.g

  • vue时间转换的几种方式

    VUE 时间转换 做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,,前端有时候从后端拿到的时间不符合标准,此时就需要转换以后再去使用,转换有两种方式,看你个人比较喜欢哪一种.这里已时间转换为例子 过滤器filter 全局过滤器 在main.js写入 // 时间戳过滤器 Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr) function timeAdd0 (str) { if (str <

  • 关于vue中的时间格式转化问题

    目录 vue时间格式转化问题 1. 效果图 2. 需求:前台展示一律用的时间规格 vue转换时间格式(适用于uni-app) 1. 前端获取实时时间 2. 运用过滤器 vue时间格式转化问题 1. 效果图 2. 需求:前台展示一律用的时间规格 yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0,这样显得整体化一.所以下面就是专门对月日时分秒小于10时做补0的处理,实际刚开始想到的就是直接挨个判断月日时分秒<10时,直接拼接0的想法,被同事打断了,这个方法太繁琐了.所以发

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

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

  • .Net Core解决WebAPI中返回时间格式带T的问题

    在项目开发中遇到了返回的时间格式带T的问题,如图所示: 直接把这种结果返回给前端,前端很难处理这个时间格式问题,所以就需要后端在返回数据的时候对这种格式进行处理. 新建Order类: using System; namespace WebApiTest { public class Order { public int ID { get; set; } public DateTime OrderTime { get; set; } } } 新建一个格式化类DatetimeJsonConverte

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

  • jQuery中校验时间格式的正则表达式小结

    代码中用到了jQuery,传入的参数是jQuery选择的input对象.原理:先用正则匹配,再提取时分秒,看其是否在正常的范围内. 复制代码 代码如下: /** * 检测时间是否符合格式 * @param {Object} timeTextBox */function checkTime(timeTextBox){    var time = timeTextBox.val();    var regTime = /^([0-2][0-9]):([0-5][0-9]):([0-5][0-9])$

  • Spring Boot中是如何处理日期时间格式的

    在springboot中开发RESTful接口,经常会遇到日期时间转换相关的问题,例如我们明明输入看起来很正常的日期时间字符串,但是系统却报错无法解析: JSON parse error: Cannot deserialize value of type java.time.OffsetDateTime from String "2020-06-06 14:26:31" 或者接口返回的日期时间字符串是一个很奇怪的字符串: 2020-06-04 14:41:54.767135400+08

  • SpringBoot中@Pattern注解对时间格式校验方式

    目录 SpringBoot @Pattern注解对时间格式校验 1.需求背景 2.实现案例 @Pattern的用法 下面是常用的正则表达式 SpringBoot @Pattern注解对时间格式校验 1.需求背景 有一个需求,在前端传过来的时间格式的字符串进行校验,是否符合"yyyy-MM-dd HH:mm:ss",在SpringBoot中当然可以用@Datetimeformat注解来进行验证,但字段的属性得用Date类型,由于我的项目中该字段用了String类型,需要对类型进行转换不太

  • 深入理解MVC中的时间js格式化

    记录下我遇到的一个,MVC中post请求返回一个JSON字符串,其中包含数据库中的时间格式(如:/Date(10000000000)/),不知道怎么处理. 百度的方法都不适用,经自己研究,做成了一个Jquery插件,希望对大家有所帮助. 插件源代码: (function ($) { /格式化JSON返回的日期类型为自己定义的格式:如:yyyy-MM-dd hh:mm:ss dtstr:JSON返回的日期"/Date(10000000000)/" * fmt:自定义的格式,如:yyyy-

  • java利用时间格式生成唯一文件名的方法

    前言 有时候我们需要截图,在要截图时,有人用到了时间格式,但是时间格式中的:在文件名称中是不被允许的字符,所以就会报错,如何生成唯一的时间文件名: 示例代码 package com.demo; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.GregorianCalendar;

  • C# DateTime.ToString根据不同语言生成相应的时间格式

    我想大家对DateTime.ToString()方法的用法肯定已经非常熟悉了,但我想大家用过的大部分用法都是:DateTime.ToString("format"),不过本文想讲述的是它的另一个重载方法DateTime.ToString("format",IFormatProvider). 如果大家做的项目中有多语言的需求的话,那么肯定少不了会有的功能要显示一个时间,由于文差异域每种语言用户对时间格式的需求肯定是不一样的,比如英文中的时间格式是:12/2/2013

随机推荐