vue页面实时显示年月日-时分秒-星期几

年月日时分秒视频

 

 年月日，时分秒用的methods,星期几用的计算属性

1.Dom结构

<div>
                                    <!-- 年月日 -->
                                    <span> {{ YearMonthDay}} </span>
                                    <!-- 星期几 -->
                                    <span>{{ weekDay}}</span>
                                    <!-- 时分秒 -->
                                    <span>{{ HourMiniterSeconds }}</span>
                                </div>

 2.定义数据

data() {
        return {
            YearMonthDay: '',//年月日数据
            HourMiniterSeconds:'',//时分秒数据
            }
        }

3.调用方法

methods: {
//获取年月日的方法
        getYearMonthDay() {
            const today = new Date();
            // 获取当前时间(today)的年份
            const year = today.getFullYear();
            // 获取月份
            const month = String(today.getMonth() + 1).padStart(2, '0');
            // 获取当前日
            const day = String(today.getDate()).padStart(2, '0');
            // 得到年月日
            this.YearMonthDay =  `${year}-${month}-${day}`; //打印当前日期
        },
        //获取时分秒的方法
        currentDate() {
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth();
            month = month + 1 > 12 ? 1 : month + 1;
            month = month > 9 ? month : "0" + month.toString();
            var day = d.getDate();
            var hour = d.getHours();
            hour = hour > 9 ? hour : "0" + hour.toString();
            var minute = d.getMinutes();
            minute = minute > 9 ? minute : "0" + minute.toString();
            var second = d.getSeconds();
            second = second > 9 ? second : "0" + second.toString();
            this.HourMiniterSeconds =  `${hour}:${minute}:${second}`;
        },
}

 computed:{
        weekDay(){
            let days = ['周日','周一','周二','周三','周四','周五','周六'];
            let today = new Date();
            let weekday = today.getDay();
            return days[weekday];
        }
    },

 最后在mounted里面调用，1秒钟执行一次

mounted() {
        setInterval(() => {
           //年月日
            this.getYearMonthDay();
            //时分秒
            this.currentDate();
        }, 1000);
}