vue.js設置時間格式的方法

小編給大家分享一下vue.js設置時間格式的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

vue.js設置時間格式的方法：首先新建一個Vue示例文件；然后通過采用自定義時間過濾器對日期進行格式化即可，其代碼如“filters:{shijianfilter:function(value,args){...}”。

在Vue.js中并沒有對于時間的格式化方法。比如，新建一個Vue文件，然后在頁面輸出當前時間。

<template>
    <p>{{shijian}}</p>
</template>
<script>
export default {
    name:"shijian",
    data() {
        return {
            shijian:new Date()
        }
    },
}
</script>
<style scoped>
</style>

結果如下，這顯然不是日常所見到的日期格式。

這時，可以通過采用自定義時間過濾器對日期進行格式化：

<template>
    <div>
        <p>不格式化的時間：               {{shijian}}</p>
        <p>格式化位年月日的時間：          {{shijian|shijianfilter("yyy-mm-dd")}}</p>
        <p>格式化精確到時分秒的時間：      {{shijian|shijianfilter("yyy-mm-dd hh:mm:ss")}}</p>
    </div>
</template>
<script>
export default {
    name:"shijian",
    data() {
        return {
            shijian:new Date()
        }
    },
    filters:{
        shijianfilter:function(value,args){
            var dt = new Date(value)
 
            var y = dt.getFullYear()
            //這里month得加1
            var m = dt.getMonth()+1
            var d = dt.getDate()
            //如果要求的時間格式只有年月日
            if(args.toLowerCase() === "yyy-mm-dd"){
                return `${y}-${m}-${d}`
            //如果時間要求精確到時分秒
            }else{
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds();
                return `${y}-${m}-${d}:${hh}:${mm}:${ss}`
            }
        }
    }
}
</script>
<style scoped>
</style>

這時輸出的結果是

看完了這篇文章，相信你對vue.js設置時間格式的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！