在Vue中,通过日期选择器选择时间(el-date-picker),然后创建与当前时间的倒计时,当选择的时间小于或等于当前时间时,倒计时内容为0,倒计时函数被清除。

HTML:

(1)日期选择器部分,与formData.dead_line数据绑定

Vue中设置倒计时
    


            
 

(2)提交按钮,与倒计时函数绑定,一旦提交,就开始执行倒计时

Vue中设置倒计时
    


            
 

(3)倒计时显示区域,与formData.countdownTime进行数据绑定

Vue中设置倒计时
    


            
 

JS:

(1)data部分

Vue中设置倒计时
    


            
 

(2)methods部分,通过截止时间与当前时间的时间差,来操作倒计时的内容

Vue中设置倒计时
    


            
 

 

在Vue中,通过日期选择器选择时间(el-date-picker),然后创建与当前时间的倒计时,当选择的时间小于或等于当前时间时,倒计时内容为0,倒计时函数被清除。

HTML:

(1)日期选择器部分,与formData.dead_line数据绑定

Vue中设置倒计时
    


            
 

(2)提交按钮,与倒计时函数绑定,一旦提交,就开始执行倒计时

Vue中设置倒计时
    


            
 

(3)倒计时显示区域,与formData.countdownTime进行数据绑定

Vue中设置倒计时
    


            
 

JS:

(1)data部分

Vue中设置倒计时
    


            
 

(2)methods部分,通过截止时间与当前时间的时间差,来操作倒计时的内容

Vue中设置倒计时
    


            
 

 

相关文章:

  • 2021-08-18
  • 2022-12-23
  • 2021-11-04
  • 2021-12-09
  • 2022-12-23
  • 2021-12-24
  • 2021-07-27
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案