vue filter 完美时间日期格式的代码

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\'],

总结

以上所述是小编给大家介绍的vue filter 完美时间日期格式的代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！