关于vue项目实现倒计时、移除倒计时,以及遇到的问题

时间:2024-03-27 12:47:17

最近在做一个vue项目,实现了倒计时功能,首先我们要知道对应的步骤
第一步:在data里面定义天时分秒,要加引号,不然会报错

关于vue项目实现倒计时、移除倒计时,以及遇到的问题

第二步:在布局里写好插值表达式,就可以传值

关于vue项目实现倒计时、移除倒计时,以及遇到的问题

第三步:在methods里定义一个方法

1、先取一个方法名,我懒得想名字,所以直接取名function()

2、定义系统服务器的时间,以及一个你想要的未来时间,我定义的是2019年7月25日

3、未来时间 - 服务器的时间 = 要显示到浏览器的时间(默认单位是毫秒)

4、所以我们要将显示到浏览器的时间单位转化为各自的单位时间

5、将转化的时间赋值

关于vue项目实现倒计时、移除倒计时,以及遇到的问题

第四步:mounted()里调用这个方法

关于vue项目实现倒计时、移除倒计时,以及遇到的问题

第五步:移除倒计时

关于vue项目实现倒计时、移除倒计时,以及遇到的问题


但是其实一开始并不是用的以上步骤

之前的方法没有第一步,第五步

第二步也不是用插值表达式,而是直接写数字00

第三步是d.innerHTML = day

所以每次一离开页面就会一直报同一个错

关于vue项目实现倒计时、移除倒计时,以及遇到的问题

我当时写的时候是将这个'd'当作是id名来用的,所以它是可以实现计时器的功能,只不过会一直报上面这个错误

我以为是没有destroyed(),但是加了也没有,试过了很多方法,还是一直报这个错,

然后我灵机一动,想到了要在data()里面定义赋值,ok,那我就加上了第一步,还是报错。。。

然后我给d.innerHTML加上前缀this.,将布局里的数字00删掉,报错。。。

再后来我寻思了一下,好像这个innerHTML在这里有点格格不入啊,而且这个d这么看来应该也不是id名了,所以我就将它们当作是一个新的定义名来用,先是在data()里面定义,然后在布局里写插值表达式,再是赋值,最后移除,终于不报错了!


以上就是我总结出来的vue项目里实现倒计时的方法以及怎么移除倒计时,遇到的问题以及解决方法,语言表达有点差。。。