用过滤器格式化时间:
理解Vue.filter()函数的使用方法
可以在bootCDN中引入 moment.js的库
参考moment.js文档中 解析部分 来指定格式化数据的格式
<div id="demo">
<p>未格式化的完整版时间: {{date}}</p>
<!-- 格式化数据时,要注意此处的格式 下一行中{{需要格式化的数据 | 过滤器名称 }}-->
<P>完整版时间: {{date | dateFormat}}</P>
<p>年月日:{{date | dateFormat("YYYY-MM-DD")}}</p>
<p>时分秒:{{date | dateFormat("HH:mm:ss")}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 从bootCDN中导入插件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script type="text/javascript">
//过滤器--格式化时间
//Vue.filter("过滤器名称",过滤函数)
Vue.filter("dateFormat",function(value,format='YYYY-MM-DD HH:mm:ss'){//p标签中的date参数会传到value参数中, 指定格式回传到format参数中
//参考moment.js文档
let newValue = moment(value).format(format);//若指定格式format为空,则按照 || 后面的格式进行格式化数据
//返回过滤之后的值
return newValue;
})
new Vue({
el:"#demo",
data:{
date: new Date()
}
})
</script>