精华内容
下载资源
问答
  • 本篇文章主要介绍了vue时间格式化实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue日期格式化

    千次阅读 2020-12-18 17:16:00
    现有vue页面如下: 需要将日期转换为:2020-12-25 二、实现 修改vue html部分,应用方法dateFormat <el-table-column prop="start_time" label="日期" width="140" :formatter="dateFormat"> </el-table...

    一、概述

    现有vue页面如下:

    需要将日期转换为:2020-12-25

    二、实现

    修改vue html部分,应用方法dateFormat

    <el-table-column prop="start_time" label="日期" width="140" :formatter="dateFormat">
              </el-table-column>
    

    增加方法dateFormat

    methods: {
          dateFormat:function(date){
            return moment(date).format("YYYY-MM-DD")
          }
        }
    

    重启vue项目,效果如下:

    注意:不需要安装插件moment,也可以实现。

    展开全文
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue时间格式化方法

    2020-10-27 09:59:57
    vue 项目中 使用elementui中的时间选择器时候,我们拿到时间数据不一定是转换后的格式,这时候就需要将时间格式转换后,再向后台传参、请求 直接在methods里定义 dateFormat(time) { let date = new Date(time...

    项目场景:

    在vue 项目中 使用elementui中的时间选择器时候,我们拿到时间数据不一定是转换后的格式,这时候就需要将时间格式转换后,再向后台传参、请求


    直接在methods里定义

    dateFormat(time) {
          let date = new Date(time);
          let year = date.getFullYear();
          let month =
            date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1;
          let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          let hours =
            date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
          let minutes =
            date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          let seconds =
            date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
          return (
            year +
            "-" +
            month +
            "-" +
            day +
            " " +
            hours +
            ":" +
            minutes +
            ":" +
            seconds
          );
        }
    

    最后再把需要的时间转换就好

    	let startDate = this.dateFormat(this.startDate)
        let endDate = this.dateFormat(this.endDate)
    

    提示:

    有时候一部分情况下,接口传参不正确,参数名不正确,会直接导致前台 进不了后台接口,控制台直接“net::ERR_FAILED”之类的报错


    展开全文
  • vue日期格式化实例

    万次阅读 2018-03-29 14:14:31
    这段代码是我常用来格式化日期用的,很好用。 Date.prototype.toLocaleString = function () { // 重写日期函数格式化日期 return `${this.getFullYear()}-${this.getMonth() + 1 &amp;amp;amp;gt;= 10 ? ...

    这段代码是我常用来格式化日期用的,很好用。

    Date.prototype.toLocaleString = function () {   // 重写日期函数格式化日期
           return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()}
                     ${this.getHours() >= 10 ? this.getHours() : '0' + this.getHours()} : ${this.getMinutes()>=10?this.getMinutes():'0'+this.getMinutes()} : ${this.getSeconds() >= 10 ? this.getSeconds() : '0' + this.getSeconds()}`;
                };
    

    使用办法

    格式化后的日期 = new Date(这里是传入的毫秒值).toLocaleString();
    

    Vue实例

    写到这里大家一定都懂了,不懂的话,我写了一个Vue实例看看:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>使用Vue格式化日期---原创马优晨</title>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    </head>
    <script>
    window.onload = function(){
        var app = new Vue({
            el: '#app',
            data:{
                timeMes:""
            },
            created() {
                let self = this;
                self.timeMes = self.dataFormat(new Date(1522611151000))
                new Date(element.followTime)
            },
            methods:{
                dataFormat(time){
                    return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
                         ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
                 }
            }
        })
    }
    
    </script>
    <body>
        <div id="app">
            作者:马优晨    时间:{{timeMes}}
        </div>
    </body>
    </html>
    

    效果图:

    这里写图片描述

    如果下图的“通话时长”的这种时间:
    在这里插入图片描述

    处理函数:

        timeDeal(time) {   // time 是一个时间戳
          const timer = +time;
          const minutes = Math.floor(timer / 60);
          const seconds =
            (timer % 3600) % 60 > 9
              ? (timer % 3600) % 60
              : `0${(timer % 3600) % 60}`;
    
          return `${minutes}'${seconds}''`;
        }
    
    展开全文
  • vue 日期格式化

    万次阅读 2018-09-04 11:36:25
    转: ... (一)函数封装 (将该函数封装成一个文件,或者加入自己项目的函数库) ...// 这个函数 网上 随处可见,我也是应用了别人的。...export function formatDate...开始时间" :value="startDate | formatDate">  

    转:https://blog.csdn.net/genius_yym/article/details/77530602

    (一)函数封装(将该函数封装成一个文件,或者加入自己项目的函数库)

    // 这个函数 网上  随处可见,我也是应用了别人的。
    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);
    }
    

    (二)文件引入注意:由于是函数,故名字要和函数的名字一致

    import { formatDate } from '@/common/commonUtil.js'
    •  

    (三)添加到过滤器中

    filters: {
        formatDate(time) {
        var date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
       }
    },

    (四)使用场景一: 在HTML中使用

    // item.createdate是后台数据~~
    <div class="bottomTimee fz12 c_9a">{{item.createdate | formatDate}}</div>

    (五)使用场景二: 在提交时候使用

    let nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')

    (六)使用场景三: 在绑定属性中使用

    <mt-cell title="开始时间" :value="startDate | formatDate"></mt-cell>

     

    展开全文
  • // 时间过滤 const dateFormart= ('dateFormart', function (value, formartStr) { // 1.根据传入的毫秒创建时间对象 var date = new Date(value) // 2.获取年月日 var year = date.getFullYear() var...
  • vue日期格式化封装

    2021-04-23 15:05:17
    // 日期格式化 export function parseTime(time, pattern) { if (arguments.length === 0 || !time) { return null } const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === '...
  • 今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue时间格式化

    2018-11-14 14:21:41
    1 安装 2.全局引入 3.使用 4.对比(格式化前后)
  • vue js日期时间格式化

    千次阅读 2019-10-10 23:51:12
    使用vue开发中,后台传过来的数据含有时间日期的通常前端都要做进一步做处理或者格式化,常用的是使用filter来过滤数据,换一种思路,前端拿到的时间日期数据一般是一串数字的时间戳,或者是一个字符串的时间日期,...
  • Vue 时间格式化

    万次阅读 2018-08-09 19:21:05
    methods{// 时间格式化 dateFormat:function(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三元表达式在小于10的前面加0,以达到...
  • 一、本节说明 在使用插值表达式的时候,我们通常会有一种...全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言,参数i
  • * 时间格式化过滤器 */ // 引入dayjs格式化时间 import dayjs from 'dayjs' // 引入中文包 import 'dayjs/locale/zh-cn' // 导入相对时间插件 import relativeTime from 'dayjs/plugin/relative...
  • 主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 格式化时间(多种方法)

    千次阅读 2020-11-27 16:24:14
    格式化时间: 后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成 yyyy-MM-dd hh:mm:ss,于是就发现moment.js这个插件啦~ 安装: npm install ...
  • vue时间格式化过滤

    2019-09-02 15:28:02
    Vue.filter('GMTToStr', function (value) { if (!value) { return 'N' } else { let date = new Date(value) let Str = date.toLocaleString('chinese', {hour12: false}) return Str } }) ...
  • VUE 格式化日期格式

    千次阅读 2020-09-06 21:10:47
    // 格式化日期格式 1 filters: { formatDate: function (value) { let date = new Date(value); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) :
  • VUE日期格式化与数据格式问题

    千次阅读 2019-10-18 19:24:30
    之前用jalor、ADF等框架做开发,前端控件有数据类型,直接定义date或者datetime就可以显示对应的日期或者日期时间格式。 但是针对VUE+ELEMENTUI 数据显示却没有对应的属性,需要自己定义工具函数进行转换。 页面列表...
  • Vue.filter('dateFormat',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) ...
  • Vue使用moment格式化日期 在平常的开发中,后端响应的日期可能不是标准的格式,我们可以用monment进行格式化 1.打开终端进行安装moment npm install moment --save 2.在vue项目当中main.js中引用 import moment ...
  • vue调用时间函数并格式化 在平时开发中,我们经常会遇见需要显示时间的地方,这个时候就需要去获取当前的时间 有个方法是new 一个 Date 我们来看看这个函数会打印什么 这函数获取了当前的时间信息,但是有时候我们...
  • vue时间日期格式化

    千次阅读 2018-11-28 17:48:40
    // 对Date的扩展,将 Date 转化为指定格式的String // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==&gt; 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s...
  • vue过滤器实现日期格式化

    千次阅读 2020-07-01 20:02:06
    说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。 大家都知道,我们获取当前日期可以通过Date...在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下: // Vue.filter(过滤器名称,处
  • vue 时间格式化

    万次阅读 2017-08-24 15:29:54
    讲述一下vue时间格式化
  • 主要介绍了vue过滤器实现日期格式化的案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,879
精华内容 10,751
关键字:

vue日期格式化

vue 订阅