使用vue.js完成一个简单的计时器功能
2021/4/20 10:27:15
本文主要是介绍使用vue.js完成一个简单的计时器功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <title>抬腿计数器</title> <script src="/static/vue/vue.js"></script> <script src="/static/vue/index.js"></script> <script src="/static/vue/vue-resource.min.js"></script> <link rel="stylesheet" href="/static/vue/index.css"> </head> <style type="text/css"> .el-header{ color: #333; text-align: center; height:260px; width:100%; font-size:160px; } .el-container { margin: 200px; height:600px; background-color: #B3C0D1; } .el-button{ height:280px; width:100%; font-size:160px; } </style> <body> <div id="app"> <el-container> <el-header style="height:260px">{{ num }}</el-header> <el-header> <el-button type="primary" :disabled="!canclick" @click="add">{{ content }}</el-button> </el-header> </el-container> </div> <script> new Vue({ el: '#app', data: function () { return { num:0, canclick:true, content:"计数器", count:10 } }, mounted(){ this.getnum() //获取所有选择项 }, methods:{ getnum:function(){ this.$http.get('/api/count/count.php').then(function(res){ this.num=res.data },function(){ console.log('请求失败处理') }); }, add:function(){ this.canclick=false let clock=setInterval(()=>{ this.count-- this.content=this.count+'s后结束' if(this.count==0){ this.content="计数器" clearInterval(clock) this.canclick=true this.count=10 } },900); this.$http.get('/api/count/add.php?num='+this.num).then(function(res){ this.num=res.data },function(){ console.log('请求失败处理') }); } } }) </script> </body> </html>
这篇关于使用vue.js完成一个简单的计时器功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist