How to set time format in vue.js

How to set the time format in vue.js: First create a new Vue sample file; then format the date by using a custom time filter. The code is such as "filters:{shijianfilter:function(value ,args){...}".

The operating environment of this tutorial: windows7 system, vue version 2.0. This method is suitable for all brands of computers.

Recommended related articles: vue.js

There is no formatting method for time in Vue.js. For example, create a new Vue file, and then output the current time on the page.

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

The results are as follows. This is obviously not the date format we see every day.

At this time, you can format the date by using a custom time filter:

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

The output result at this time is

The above is the detailed content of How to set time format in vue.js. For more information, please follow other related articles on the PHP Chinese website!