精华内容
下载资源
问答
  • 本篇文章主要介绍了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时间格式化方法

    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}''`;
        }
    
    展开全文
  • // 时间过滤 const dateFormart= ('dateFormart', function (value, formartStr) { // 1.根据传入的毫秒创建时间对象 var date = new Date(value) // 2.获取年月日 var year = date.getFullYear() var...
    **可单独写一个文件导出**
    //1, 时间过滤
     const dateFormart= ('dateFormart', function (value, formartStr) {
        // 1.根据传入的毫秒创建时间对象
        var date = new Date(value)
        // 2.获取年月日
        var year = date.getFullYear()
        var month = date.getMonth() + 1 + ''
        var day = date.getDate() + ''
        var hours = date.getHours() + ''
        var min = date.getMinutes() + ''
        var sec = date.getSeconds() + ''
        // 3.判断需要格式化的格式
        if (formartStr && formartStr.toLowerCase() === 'yyyy-mm-dd') {
          return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
        } else if (formartStr && formartStr.toLowerCase() === 'yy-mm-dd') {
          return `${year}.${month.padStart(2, '0')}.${day.padStart(2, '0')} ${hours.padStart(2, '0')}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`
        } else {
          return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hours.padStart(2, '0')}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`
        }
        // 3.生成指定的格式
        // return  year +"-"+month+"-"+day+" "+hours+":"+min+":"+sec;
        // return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hours.padStart(2, "0")}:${min.padStart(2, "0")}:${sec.padStart(2, "0")}`;
      })
      export default {
        dateFormart
      }
     2 **简便写法 直接在源文件使用即可**
       formatTime: function(val) {
                if (!val) return '- -';
                var date = new Date(val);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                month = month < 10 ? '0' + month : month;
                var day = date.getDate();
                day = day < 10 ? '0' + day : day;
                var h = date.getHours();
                h = h < 10 ? '0' + h : h;
                var m = date.getMinutes();
                m = m < 10 ? '0' + m : m;
                return year + '-' + month + '-' + day + ' ' + h + ':' + m;
              }
    
    在main.js全局引入
    import filter from './assets/util/util'
    // 全局导入时间过滤器
    Object.keys(filter).forEach(key => Vue.filter(key, filter[key]))
    

    页面调用

    <div class="List-time">
              <span>{{item.createTime | dateFormart('yyyy-MM-dd')}}</span>
    </div>
    最后生成格式//2020-01-01
    
    展开全文
  • vue时间格式的转换

    千次阅读 2020-12-30 11:57:03
    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() + '').pad
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 时间格式转换

    2021-05-31 15:04:53
    <p>HH:mm:ss转换成HH:mm 后端返回的时间是12:00:00,现在只要12:00要怎么转换</p>
  • vue 日期格式

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

    2021-03-12 14:43:34
    Vue 时间格式设置 <el-form-item label="办理时间" prop="date"> <el-date-picker v-model="form.date" type="datetime" format="yyyy/MM/dd hh:mm:ss" value-format="yyyy/MM/dd hh:mm:ss" placeholder...
  • VUE日期格式化与数据格式问题

    千次阅读 2019-10-18 19:24:30
    之前用jalor、ADF等框架做开发,前端控件有数据类型,直接定义date或者datetime就可以显示对应的日期或者日期时间格式。 但是针对VUE+ELEMENTUI 数据显示却没有对应的属性,需要自己定义工具函数进行转换。 页面列表...
  • 在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况 不同组件多次使用的话,那么建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用 在组件中使用 <p>{{date1 | ...
  • vue 时间格式相互转化 1、转化YYYYMMDDHHMMSS时间格式为YYYY-MM-DD HH:MM:ss export function changeTime(time) { var newtime = '' newtime = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time....
  • vue js日期时间格式

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

    万次阅读 2020-05-23 15:46:10
    需求:前台展示一律用的时间规格:yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0,这样显得整体化一。所以下面就是专门对月日时分秒小于10时做补0的处理,实际刚开始想到的就是直接挨个判断月日时分秒&...
  • 下面小编就为大家分享一篇vue将时间戳转换成自定义时间格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue日期格式处理

    千次阅读 2018-12-16 15:05:06
    项目开发中,由于后台返回的数据是时间戳,所以前台需要有一哥统一处理日期。 举例:后台返回时间戳:...Transfer将时间戳转换成Date类型,Format第一个参数为日期格式,第二个参数为可选,当日期为nul...
  • vue时间格式

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

    千次阅读 2020-10-08 01:14:10
    封装 formatLongDate (date) { let myyear = date.getFullYear(); let mymonth = date.getMonth() + 1; let myweekday = date.getDate(); let myHour = date.getHours(); let myMin = date.ge
  • 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中将日期转换为指定的格式

    千次阅读 2020-12-16 16:12:59
    //时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化 dateFormat:function(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中,月份是从0开始的,因此要加0 * ...
  • 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时间日期格式

    千次阅读 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 时间格式

    万次阅读 2018-08-09 19:21:05
    methods{// 时间格式化 dateFormat:function(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三元表达式在小于10的前面加0,以达到...
  • Vue使用moment格式日期 在平常的开发中,后端响应的日期可能不是标准的格式,我们可以用monment进行格式化 1.打开终端进行安装moment npm install moment --save 2.在vue项目当中main.js中引用 import moment ...
  • Vue.filter(‘dateFormat’, function(originVal) { // originVal1000 防止年份为1970 const dt = new Date(originVal1000) // padStart(2, ‘0’) 补零操作 const y = dt.getFullYear() const m = (dt.getMonth() +...
  • vue过滤器实现日期格式

    千次阅读 2020-07-01 20:02:06
    说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。 大家都知道,我们获取当前日期可以通过Date...在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下: // Vue.filter(过滤器名称,处
  • 一、本节说明 在使用插值表达式的时候,我们通常会有一种...全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言,参数i
  • 调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 &lt;div&gt;{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}&lt;/div&gt; 代码: import Vue from 'vue' Vue.filter('dataFormat', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 148,353
精华内容 59,341
关键字:

vue日期格式

vue 订阅