zoukankan      html  css  js  c++  java
  • 关于 vue 日期格式的过滤

    最近也在写公司几个单独页面,数据量比较繁琐,

    遇到各种坑 各种语法 (之前用angular ng习惯了)

    在网上也没有查到vue自带的时间过滤器

    废话不多说  vue 时间 单独 html 应用

    单独建立一个js文件:

    //日期格式化
    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);
    }
     
    //引入html文件  
    //备注 这里是单独html引用 不是项目 
    //相项目 要 impro然后import引入
    <script src="vue/data.js"></script>
     
    html中去调用之前定义好的 formatDate方法
     
    //日期过滤器
    filters: {
    formatDate(time) {
    var date = new Date(time);
    return formatDate(date,'yyyy年MM月dd日 hh:mm');
    }
    },
     
    <p style="color:#999;margin-top:10px; font-size:14px;">开始时间 :<span style="color:#a650ff">{{Articlelis.start_time | formatDate}}</span></p>
     
    {{ 绑定的数据 | formatDate}}
     
    就是这样写!!!
     
     
    vue大神请多多指点,vue爱好着
     
  • 相关阅读:
    小程序swiper组件实现间距轮播
    小程序form静态页面跳转
    批量添加Iconfont图标库图标
    Vant Weapp 有赞小程序UI库 ICON 组件的本地图标路径支持
    $rootScope、$apply、$watch
    EF code first 数据模型创建数据库
    angularjs directive2
    angularjs directive
    angularjs service
    angular repeat
  • 原文地址:https://www.cnblogs.com/cxcoder/p/8317348.html
Copyright © 2011-2022 走看看