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>
