zoukankan      html  css  js  c++  java
  • 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>
      

        

  • 相关阅读:
    53. Maximum Subarray
    64. Minimum Path Sum
    28. Implement strStr()
    26. Remove Duplicates from Sorted Array
    21. Merge Two Sorted Lists
    14. Longest Common Prefix
    7. Reverse Integer
    412. Fizz Buzz
    linux_修改域名(centos)
    linux_redis常用数据类型操作
  • 原文地址:https://www.cnblogs.com/dinghaoran/p/11641576.html
Copyright © 2011-2022 走看看