vue实现倒计时60秒
Vue 实现 倒计时 60
2023-09-14 09:13:43 时间
<span v-show="show" @click="getCode" class="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}}s后重新获取</span>
data(){
return {
show: true,
count: '',
timer: null,
}
},
methods: {
getCode(){
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
}
}
转载:感谢分享
原文链接https://www.jb51.net/article/125533.html
相关文章
- vue源码中的nextTick是怎样实现的
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- vue-cli构建项目
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- Vue笔记(1)
- 在 Vue 中,子组件为何不可以修改父组件传递的 Prop
- vue的双向绑定原理及实现_vue的数据绑定怎么实现
- vue-property-decorator的简单介绍,一看就会
- vue-router实现路由懒加载( 动态加载路由 )_前端懒加载原理
- vue纯前端分页_基于vue的表格组件
- Vue.js 数据绑定的基本实现和代码分析
- Vue双向绑定实现原理
- delete和Vue.delete的区别
- vue.js客服系统实时聊天项目开发(十五)实现聊天界面滚动到底部
- 初识renren-fast-vue
- vue-cli 是怎么配置babel的?
- Vue.js数据管理神器Vuex搭配MySQL数据库,打造高效实用的Web应用(vuexmysql)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue实时监测Redis变化(vue监控redis变化)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)