在vue中写个时间

最新推荐文章于 2022-08-31 17:30:40 发布

hardwork come on

最新推荐文章于 2022-08-31 17:30:40 发布

阅读量1k

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/weixin_43353869/article/details/106723832

版权

vue.js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

用声明式变量,定义time(当前的时间)和week(星期)
1.获取当前的时间和获取当前的周期
2.在mounted中使用定时器
3.在beforeCreate中清楚定时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<div id="app">

    <h2 v-cloak>{{time}}-{{weeks}}</h2>
    <!-- <button>点击显示时间</button>
    {{time}}-{{weeks}} -->
</div>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                time: '',
                weeks: '',
                twotime: '',
                tis:'',
                ks:'1'
            },
            methods: {
                getNowTime() {
                    var date = new Date();
                    //获取小时
                    var hour = date.getHours()
                    hour = hour < 10 ? "0" + hour : hour
                    //获取分钟
                    var minute = date.getMinutes();
                    minute = minute < 10 ? "0" + minute : minute;
                    //获取秒
                    var second = date.getSeconds();
                    second = second < 10 ? "0" + second : second;
                    return this.time = hour + ":" + minute + ":" + second;
                    // return hour + ":" + minute + ":" + second;
                },
                getNowWeek() {
                    var date = new Date();
                    var arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
                    //获取星期
                    var week = date.getDay();
                    return this.weeks = arr[week]
                    // return arr[week];
                },
                dates() {
                        this.getNowTime(),
                        this.getNowWeek()
                        // console.log('1')
                },
            },
            mounted() {
                // show(){
                //把当前时间显示在页面中
                // this.time = getNowTime();
                // this.week = getNowWeek();
                // },
                // show(){
                //     getNowTime();
                //     getNowWeek();
                // }
                // this.dates() 
                //最开始,自动调用一次显示日历
                // this.show(),
                //每隔一秒更换一次时间显示
                this.twotime=setInterval(this.dates, 2000);
                //  this.tis=setInterval(this.ks,5000)
            },
            beforeCreate(){
                clearInterval(this.twotime)
            }
        })
    </script>
</body>

</html>

hardwork come on

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在vue中写个时间

用声明式变量,定义time(当前的时间)和week(星期)1.获取当前的时间和获取当前的周期2.在mounted中使用定时器3.在beforeCreate中清楚定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫