• VUE实例课程---4、过滤器处理时间


    VUE实例课程---4、过滤器处理时间

    一、总结

    一句话总结:

    vue中处理时间可以用过滤器,可以很方便的得到各种格式的时间数据。可以配合moment.js来处理时间更加方便。
    <div id="app">
        <p>原始date模式:{{time}}</p>
        <p>年月日 时分秒:{{time | formatDate}}</p>
        <p>年月日:{{time | formatDate('YYYY-MM-DD')}}</p>
        <p>时分秒:{{time | formatDate('HH:mm:ss')}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
    <script>
        Vue.filter('formatDate',function (dateStr,format='YYYY-MM-DD HH:mm:ss') {
            return moment(dateStr).format(format);
        });
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '我有一只小毛驴,我永远也不骑'
            }
        });
    </script>

    二、过滤器处理时间

    博客对应课程的视频位置:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>1、过滤器处理时间</title>
     6 </head>
     7 <body>
     8 <!--
     9 
    10 vue中处理时间可以用过滤器,可以很方便的得到各种格式的时间数据。可以配合moment.js来处理时间更加方便。
    11 
    12 
    13 -->
    14 <div id="app">
    15     <p>原始date模式:{{time}}</p>
    16     <p>年月日 时分秒:{{time | formatDate}}</p>
    17     <p>年月日:{{time | formatDate('YYYY-MM-DD')}}</p>
    18     <p>时分秒:{{time | formatDate('HH:mm:ss')}}</p>
    19 </div>
    20 <script src="../js/vue.js"></script>
    21 <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
    22 <script>
    23     Vue.filter('formatDate',function (dateStr,format='YYYY-MM-DD HH:mm:ss') {
    24         return moment(dateStr).format(format);
    25     });
    26     let vm = new Vue({
    27         el: '#app',
    28         data: {
    29             msg: '我有一只小毛驴,我永远也不骑'
    30         }
    31     });
    32 </script>
    33 </body>
    34 </html>

     
  • 相关阅读:
    小峰视频三:在eclipse中创建java类
    小峰视频二:java类的编译与解释
    小峰视频一:jdk环境变量的配置
    React/数据流
    React/组件
    React/生命周期
    React/虚拟DOM
    React/JSX简介
    12.朴素贝叶斯-垃圾邮件分类
    9、主成分分析
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12749315.html
Copyright © 2020-2023  润新知