首頁 >web前端 >Vue.js >vue.js如何設定時間格式

vue.js如何設定時間格式

藏色散人
藏色散人原創
2020-12-18 09:30:186129瀏覽

vue.js設定時間格式的方法:首先新建一個Vue範例檔案;然後透過採用自訂時間篩選器對日期進行格式化即可,其程式碼如「filters:{shijianfilter:function(value ,args){...}」。

vue.js如何設定時間格式

本教學操作環境:windows7系統、vue2.0版,此方法適用於所有品牌電腦。

相關文章推薦:vue.js

在Vue.js中並沒有對於時間的格式化方法。例如,新建一個Vue文件,然後在頁面輸出目前時間。

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

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

vue.js如何設定時間格式

這時,可以透過採用自訂時間篩選器對日期進行格式化:

<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如何設定時間格式

以上是vue.js如何設定時間格式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn