So legen Sie das Zeitformat in vue.js fest

So legen Sie das Zeitformat in vue.js fest: Erstellen Sie zunächst eine neue Vue-Beispieldatei. Formatieren Sie dann das Datum mithilfe eines benutzerdefinierten Zeitfilters. Der Code lautet wie folgt: „filters:{shijianfilter:function(value,args){“. ..}".

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue-Version 2.0. Diese Methode ist für alle Computermarken geeignet.

Empfohlene verwandte Artikel: vue.js

In Vue.js gibt es keine Formatierungsmethode für die Zeit. Erstellen Sie beispielsweise eine neue Vue-Datei und geben Sie dann die aktuelle Uhrzeit auf der Seite aus.

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

Das Ergebnis ist wie folgt, das ist offensichtlich nicht das Datumsformat, das man jeden Tag sieht.

Zu diesem Zeitpunkt können Sie das Datum mithilfe eines benutzerdefinierten Zeitfilters formatieren:

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

Das Ausgabeergebnis zu diesem Zeitpunkt ist

Das obige ist der detaillierte Inhalt vonSo legen Sie das Zeitformat in vue.js fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!