Vue使用过滤器显示日期

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

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

Vue使用过滤器显示日期

 

 

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

Vue使用过滤器显示日期

 

 

 

 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的首页和文档中可以查询该库的使用

Vue使用过滤器显示日期

 

 

 Vue使用过滤器显示日期

 

 

 

例如:

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>

最终实现

Vue使用过滤器显示日期

 

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

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

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

 

上一篇:判断日期格式是否是 yyyy-MM-dd 并且2021-01-1 或2021-1-1 这种格式是不正确的


下一篇:时间转换函数总结