Vue使用过滤器显示日期

  咸鱼总算找到点内容可以水一下随笔

 首先我们到bootcdn(https://www.bootcdn.cn/)去找我们要用到的库的连接，找到moment.js

 

 

 点击进入之后，找到以下连接

 

 

 

 https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js

https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js

这两个连接都可以用，然后在script标签用src导入即可

我们可以在moment.js的首页和文档中可以查询该库的使用

 

 

 

 

 

 

例如：

moment().format('MMMM Do YYYY, h:mm:ss a');

或者

moment(date参数).format('YYYY-MM-DD HH:mm:ss');

 

好，以上内容均可跳过（划掉）

 

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.21.0/moment.js"></script>
</head>
<body>
    <div id="test">
        <h2>显示格式化的日期时间</h2>
        <p>{{date}}</p>
        <p>完整版：{{date | dateString}}</p>
        <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p>
        <p>时分秒：{{date | dateString('HH:mm:ss')}}</p>
    </div>
    <script>
        // 自定义过滤器
        //函数对象
        Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){//形参默认值
            return moment(value).format(format);
        });
        new Vue({
            el:'#test',
            data:{
                date:new Date()
            }
        })
    </script>
</body>
</html>

最终实现

 

由于本人过于咸鱼，所以随笔写的极差，还有不清楚的可以通过

https://www.bilibili.com/video/BV1Wp411d7Ur?p=16&spm_id_from=pageDriver

这个视频了解更加详细的内容

 

posted @ 2021-02-13 15:55  恒迹恒心  阅读(302)  评论(0)    收藏  举报