Vue时间格式化

2019-06-19  本文已影响0人  夕月红叶酱

1.html


vue   -- > {{date || dateString}} , 第二个为过滤器的名称。 可以再过滤器中对参数进行格式化。第一个参数为传入过滤器的value,也可以显示的指定参数进行传递 


<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>

2.JS


    使用moment.js库对时间进行格式化操作


<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>

<script>

//自定义过滤器

  Vue.filter('dateString',function(value,format){

return moment(value).format(format ||'YYYY-MM-DD HH:mm:ss')//对指定事件进行格式化

  })

new Vue({

el:"#test",

data:{

date:new Date(),

}

})

</script>

上一篇下一篇

猜你喜欢

热点阅读