vue组件里的倒计时定时器,vue实现倒计时功能
这篇文章主要为大家详细介绍了vue。j实现简单计时器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue。j实现简单计时器功能的具体代码，供大家参考，具体内容如下
！声明文档类型
html lang=en
头
标题抬腿计数器/标题
脚本src=/static/vue/vue。js /脚本
脚本src=/static/vue/index。js /脚本
脚本src=/static/vue/vue-resource。量滴js /脚本
link rel=样式表 href=/static/vue/index。 CSS
/头
style type=text/css 。埃尔-容器{
边距：100像素30像素30像素30像素
高度：1800像素
背景色：# B3C0D1
}。埃尔按钮{
高度：1800像素
宽度：100%;
字体大小：300像素；
}
/风格
身体
div id=应用程序
埃尔容器
El-button type= primary :disabled=！canclick @click=add
{ { num } } El-divider/El-divider { { content } }
/el-button
/El-容器
视频引用=通知
source src=countdown.m4a /
/视频
/div
脚本
新Vue({
埃尔： #app ，
数据：函数(){
返回{
数字：0,
canclick:对，
内容：计数器，
计数：10
}
},
已安装(){
this.getnum() //获取所有选择项
},
方法：{
getnum:function(){
这个. http。get(/API/count/count。PHP’).然后（函数(资源){
this.num=res.data
}，function(){
console.log(请求失败处理)
});
},
add:function(){
this.canclick=false
这个. refs.notify.play()
this.content=this .计数的后结束
设clock=setInterval(()={
这个。计数-
this.content=this .计数的后结束
if(this.count==0){
this.content=计数器
清除间隔（时钟)
this.canclick=true
this.count=10
}
},850);
这个. http.get(/api/count/add.php？num= this.num).然后（函数(资源){
this.num=res.data
}，function(){
console.log(请求失败处理)
});
}
}
})
/脚本
/body
/html
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。