溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue filter 完美時間日期格式的代碼

發(fā)布時間:2020-09-06 17:20:13 來源:腳本之家 閱讀:248 作者:breathfish 欄目:web開發(fā)

vue filter時間日期格式的實例代碼如下所示:

<template>
<div>{{msg | compFilter('yyyy-MM-dd hh:mm') }}</div>
</template>
<script>
export default {
data() {
  return {
    msg: new Date()
    // msg: 10,
  }
},
filters: {
  compFilter: function(value, format) {
    let o = {
      "M+": value.getMonth() + 1,![圖片描述][1]
      "d+": value.getDate(),
      "h+": value.getHours(),
      "m+": value.getMinutes(),
      "s+": value.getSeconds(),
    }
    if(/(y+)/.test(format)){
      format = format.replace(RegExp.$1, (value.getFullYear() + "").substr(4-RegExp.$1.length));
      for(let k in o) {
        if(new RegExp(`(${k})`).test(format)){
          format = format.replace(RegExp.$1, (RegExp.$1.length == 1)?(o[k]):(("00" + o[k]).substr((""+o[k]).length)))
        }
      }
      return format;
    }
  }
},
}
</script>

知識點擴展:

vue filter方法-時間格式化

plugins/filter.js

import Vue from 'vue'
// 時間格式化
// 用法:<div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div>
Vue.filter('formatDate', function (value, fmt) {
 let getDate = new Date(value);
 let o = {
  'M+': getDate.getMonth() + 1,
  'd+': getDate.getDate(),
  'h+': getDate.getHours(),
  'm+': getDate.getMinutes(),
  's+': getDate.getSeconds(),
  'q+': Math.floor((getDate.getMonth() + 3) / 3),
  'S': getDate.getMilliseconds()
 };
 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
 }
 for (let k in o) {
  if (new RegExp('(' + k + ')').test(fmt)) {
   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  }
 }
 return fmt;
})

nuxt.config.js

 plugins: ['@/plugins/element-ui', '@/plugins/filters.js'],

總結(jié)

以上所述是小編給大家介紹的vue filter 完美時間日期格式的代碼 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI