vue 处理日期格式

傷城~ 2021-12-14 15:55 368阅读 0赞

<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/vue.min.js" ></script>
        </head>
        <body>
            <div id="app">
                {
       {date}}
                <br>
                {
       {date | formatDate}}
            </div>
            <script type="text/javascript">
                padDate = (value)=> {
                    return value < 10 ? '0' + value : value;
                }
                var v = new Vue({
                    el: "#app",
                    data: {
                        date: '2019-06-29T05:15:15.000+0000'
                    },
                    methods: {	
                    },
                    filters: {
                        formatDate: function (value) {  //这里的 value 就是需要过滤的数据
                            var date= new Date(value);
                            var year= date . getFullYear() ;
                            var month= padDate(date.getMonth() + 1) ;
                            var day= padDate(date . getDate());
                            var hours= padDate(date . getHours());
                            var minutes = padDate (date .getMinutes ());
                            var seconds = padDate (date .getSeconds ());
                            return year + '-' + month +'-' + day + ' ' + hours + ':' +minutes +':' + seconds;
                        }
                    }
                })
            </script>
        </body>
    </html>

运行效果

![20190703174039711.png][]

[20190703174039711.png]: /images/20211214/4b712748a91d40e79a6c9a13cd660747.png