VUE Element UI 60秒倒计时
2017-12-28 10:36
567 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <el-container id='app'> <el-button @click="sendMsg" type="primary" :disabled="isDisabled">{{buttonName}}</el-button> </el-table> </el-container> </body> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: { buttonName: "发送短信", isDisabled: false, time: 10 }, methods: { sendMsg() { let me = this; me.isDisabled = true; let interval = window.setInterval(function() { me.buttonName = '(' + me.time + '秒)后重新发送'; --me.time; if(me.time < 0) { me.buttonName = "重新发送"; me.time = 10; me.isDisabled = false; window.clearInterval(interval); } }, 1000); } } }) </script> </html>
相关文章推荐
- Vue上传文件:ElementUI中的upload实现
- webpack+vue+elementui构建后台管理系统
- 浅谈vue中改elementUI默认样式引发的static与assets的区别
- Vue+element-ui 实现表格的分页功能示例
- 在vue项目中使用element-ui的Upload上传组件
- vue使用element-ui的el-input监听不了回车事件解决
- spring boot + vue + element-ui全栈开发入门——开篇
- vue.js + element-ui + webpack项目搭建
- vue获取手机验证码60秒倒计时,不能点击按钮
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 基本知识点概述
- 谈谈学习element UI + vue.js的感受
- webpack+vue.js+elementUI试做后台管理页面
- 【vue】vue项目引入 Element-UI
- vue.js与element-ui实现菜单树形结构的解决方法
- vue及ElementUI环境搭建
- vue中element-ui表格缩略图悬浮放大功能的实例代码
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
- 详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
- 基于VUE+ElementUI对web socket的配置