问题背景
项目中有个需求是要展示订单列表中待支付的订单显示倒计时,在订单支付后,或者 超时后刷新列表,更新状态
解决思路
项目使用的vue框架,就要运用vue的数据驱动试图这一特性,所以我们需要添加一个定时器,在定时器中去改变页面上展示的数组的数据,只要数据变了,页面上的展示就变了,定时器每隔一秒,就会变更一下页面数据,就达到了我们想要的效果
先看下效果
图片中只展示了一条带支付,实际情况中可能有多条待支付,也就是说要展示多个倒计时的显示
实现方式
一、请求接口数据,得到数据后存在一个数组里
getOrderList(){
this.curOrderList = res.data || []
}
二,在mounted里调用定时器,这里注意this.timer是在data中,初始为null
<