vue获取时分秒

在开发时制作了一个获取到时分秒的小功能,并加了一个判断,在规定时间内字体会变色,触发弹窗。

vue2

methods部分代码如下:

methods: {
    fn() {
      let that = this;
      axios({
        method: "post",
        url: "接口",
        data: qs.stringify({
        //拿到需要使用的数据
        }),
      })
        .then((res) => {
          that.cons = res.data.data; //拿到内容的数据
          console.log(res);
          //  声明一个变量指向Vue实例this,保证作用域一致
          var date = new Date();
          var hour = date.getHours(); //得到小时数
          if (date.getHours() > 9) {
            var hour = date.getHours();
          } else {
            var hour = "0" + date.getHours();
          }
          if (date.getMinutes() > 9) {
            var minute = date.getMinutes(); //得到秒数
          } else {
            var minute = "0" + date.getMinutes(); //得到分钟数
          }
          if (date.getSeconds() > 9) {
            var second = date.getSeconds(); //得到秒数
          } else {
            var second = "0" + date.getSeconds(); //得到秒数
          }
          // var arr = [];
          var timer = hour + ":" + minute + ":" + second;
          for (var i = 0; i < that.cons.length; i++) {
            if (timer > that.cons[i].begin && timer < that.cons[i].end) {
              let arrs = true;
              that.arr.push(arrs);
              Dialog.alert({//vant组件的弹窗
                title:this.cons[i].title,
                message:this.cons[i].content,
              }).then(() => {
                // on close
              });
            } else {
              let arrs = false;
              that.arr.push(arrs);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

因为是写在methods中的,所以需要在调用一下

created部分代码:

    let that = this;
    that.fn(); //调用函数

beforedestroy部分代码:

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前,清除定时器
    }
  },

因为是用接口写的,所以数据要注意在data中return出去,比如说methods中的cons。。

写的太草率,有些地方不详细的请包容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值