Heim > Web-Frontend > View.js > Hauptteil

So legen Sie das Zeitformat in vue.js fest

藏色散人
Freigeben: 2020-12-18 09:30:18
Original
6086 Leute haben es durchsucht

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){“. ..}".

So legen Sie das Zeitformat in vue.js fest

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>
Nach dem Login kopieren

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

So legen Sie das Zeitformat in vue.js fest

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>
Nach dem Login kopieren

Das Ausgabeergebnis zu diesem Zeitpunkt ist

So legen Sie das Zeitformat in vue.js fest

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage