vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss

vue插值表达式中将时间转换两种方式:
一、定义方法
<div id="app">当前实时时间:{{dateFormat(date)}}</div>
//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat(time) {
    var date=new Date(time);
    var year=date.getFullYear();
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* */
    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
// 拼接
    return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}    

  

二、定义过滤器

  1.   引入moment依赖
    npm install moment --save
    

      

  2. main.js中全局引用并定义过滤器
    import moment from 'moment'
    //全局过滤器
    Vue.filter('dateFmt', (input, formatString = "YYYY-MM-DD") => {
        return moment(input).format(formatString)
    })
    

      

  3. 组件插值表达式中使用
    <div id="app">当前实时时间:{{date|dateFmt('YYYY-MM-DD HH:mm:ss')}}</div>
    

      

原文地址:https://www.cnblogs.com/dinghaoran/p/11641576.html