在开发时制作了一个获取到时分秒的小功能,并加了一个判断,在规定时间内字体会变色,触发弹窗。
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。。
写的太草率,有些地方不详细的请包容