您正在使用IPV4(3.235.184.215)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 端午节 0
2021年 建党节 17
2022年 元 旦 201
2022年 春 节 232
 
  • 您现在的位置:首页 >> JS >> 内容

    Vue 中获取当前时间并实时刷新的实现代码

    内容摘要: templatediv {{nowDate}}{{nowWeek}}{{nowTime}}/div/templatescriptexport default {data(){ return { nowDate: '', // 当前日期 nowTime: '', // 当前时间 nowWeek: '' // 当前星期 }},methods:{ dealWith......

      <template>

    <div>

    {{nowDate}}{{nowWeek}}{{nowTime}}

    </div>

    </template>


    <script>

    export default {

    data(){

    return {

    nowDate: "", // 当前日期

    nowTime: "", // 当前时间

    nowWeek: "" // 当前星期

    }

    },

    methods:{

    dealWithTime(data) { // 获取当前时间

    let formatDateTime;

    let Y = data.getFullYear();

    let M = data.getMonth() + 1;

    let D = data.getDate();

    let H = data.getHours();

    let Min = data.getMinutes();

    let S = data.getSeconds();

    let W = data.getDay();

    H = H < 10 ? "0" + H : H;

    Min = Min < 10 ? "0" + Min : Min;

    S = S < 10 ? "0" + S : S;

    switch (W) {

    case 0:

    W = "日";

    break;

    case 1:

    W = "一";

    break;

    case 2:

    W = "二";

    break;

    case 3:

    W = "三";

    break;

    case 4:

    W = "四";

    break;

    case 5:

    W = "五";

    break;

    case 6:

    W = "六";

    break;

    default:

    break;

    }

    this.nowDate = Y + "年" + M + "月" + D + "日 ";

    this.nowWeek = "周" + W ;

    this.nowTime = H + ":" + Min + ":" + S;

    // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;

    },

    },

    mounted() {

    // 页面加载完后显示当前时间

    this.dealWithTime(new Date())

    // 定时刷新时间

    this.timer = setInterval(()=> {

    this.dealWithTime(new Date()) // 修改数据date

    }, 500)

    },

    destroyed() {

    if (this.timer) { // 注意在vue实例销毁前,清除我们的定时器

    clearInterval(this.timer);

    }

    }

    }

    </script>


    <style lang="scss" scope>


    </style>

    手机扫描二维码可直达本页
      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/5/13 发布时间:15:53:36 点击:1669 录入:齐天大圣
  • 上一篇:js页面跳转常用的几种方式
  • 下一篇:Js生成随机数/随机字符串的方法
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.35 Build 21.06.10(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021