vue+element UI＋原生JS实现日期倒计时

直接来代码:

    
    
    
    
    
    
    
    



    

        
            
                
                    
                    
                
                
                    还剩下
                    {{time}}
                    秒
                    {{timeDay}}
                    天
                
            
        
    

实现方式使用setInterval和setTimeout定时器实时更新.

setInterval(function(){}, milliseconds)——会不停的调用函数

setTimeout(function(){}, milliseconds)——只执行函数一次

如果单纯的使用setInterval会因为定时器无法清除定时器队列,导致页面卡死,原因可能与JS引擎线程有关这个我就不是很懂了.

但是setTimeout是自带清除定时器的.

这两种定时器同时使用,就不需要再使用vue的destroyed在页面销毁的时候清除定时器了.

v-cloak 的作用和用法

HTML 绑定 Vue实例，在页面加载时会闪烁{{msg}}

v-cloak 可以解决这一问题，在 css 中加上

[v-cloak] {
 display: none;
}

在 html 中的加载点加上 v-cloak，就可以解决这一问题

  {{msg}}

效果: