vue2.0 自定义日期时间过滤器

 更新时间:2017年06月07日 14:59:35   作者:m0_37068028  
本文给大家带来两种方法实现vue2.0 自定义日期时间过滤器,需要的的朋友参考下吧

方法一:

// template
{{a | data}}
//script
data:{
  a: Date.now()
}
filters: {
  data:function (input) {
    var d = new Date(input);
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
    var hour = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    return year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
  }

方法二: 正则

// template
{{date | formatDate}}
//script
import {formatDate} from '../../common/js/date'
filters: {
 formatDate (time) {
  let date = new Date(time)
  return formatDate(date, 'yyyy-MM-dd hh:mm')
 }
}
//date.js
export function formatDate (date, fmt) {
 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
 }
 let o = {
  'M+': date.getMonth() + 1,
  'd+': date.getDate(),
  'h+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
 }
 for (let k in o) {
 if (new RegExp(`(${k})`).test(fmt)) {
   let str = o[k] + ''
   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
  }
 }
 return fmt
}
function padLeftZero (str) {
 return ('00' + str).substr(str.length)
}

以上所述是小编给大家介绍的vue2.0 自定义日期时间过滤器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 关于el-form中el-input输入框的宽度问题详解

    关于el-form中el-input输入框的宽度问题详解

    自从用了element-ui,确实好用,该有的组件都有,下面这篇文章主要给大家介绍了关于el-form中el-input输入框的宽度问题的相关资料,需要的朋友可以参考下
    2023-01-01
  • VUE实现强制渲染,强制更新

    VUE实现强制渲染,强制更新

    今天小编就为大家分享一篇VUE实现强制渲染,强制更新,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue路由第二次进入页面created和mounted不执行问题及解决

    vue路由第二次进入页面created和mounted不执行问题及解决

    这篇文章主要介绍了vue路由第二次进入页面created和mounted不执行问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Element el-upload上传组件使用详解

    Element el-upload上传组件使用详解

    本文主要介绍了Element el-upload上传组件使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue-router+nginx 非根路径配置方法

    vue-router+nginx 非根路径配置方法

    这篇文章主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vant开发微信小程序安装以及简单使用教程

    vant开发微信小程序安装以及简单使用教程

    这篇文章主要介绍了vant开发微信小程序安装以及简单使用教程,需要的朋友可以参考下
    2022-12-12
  • vue组件发布成npm包

    vue组件发布成npm包

    平常使用Vue开发时,一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件,所以我们可以将封装好的组件打包发布至npm,本文主要介绍了vue组件发布成npm包,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue封装axios的几种方法

    vue封装axios的几种方法

    在vue中最常用的应该就是axios了,这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述,提前安装一下也不用我说了吧
    2021-06-06
  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue的很多思想借鉴于Angular,但却比较轻量和自由,这里我们整理了JavaScript的Vue.js库入门学习教程,包括其架构思想与核心的数据绑定方式等,需要的朋友可以参考下
    2016-05-05
  • 使用vuepress搭建静态博客的示例代码

    使用vuepress搭建静态博客的示例代码

    这篇文章主要介绍了使用vuepress搭建静态博客的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02

最新评论