vue 验证码倒计时

最新推荐文章于 2024-06-17 10:51:35 发布

转载最新推荐文章于 2024-06-17 10:51:35 发布 · 722 阅读

文章标签：

#vue

前端同时被 2 个专栏收录

136 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>vue倒计时</title>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
	
	<style type="text/css">
		[v-cloak]{ 
			display: none;//VUE初始化加载数据时不渲染页面
		}
	</style>
	
	<body>
		
		<div id="app" v-cloak>
			<button type="button" @click="start">{{status?('重新获取('+second+'s)'):'验证码'}}</button>
		</div>
		
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				second: 5,
				status: false
			},
			methods:{
				
				start: function(){
					var vm = this;
					if(vm.status) return;
						
					vm.status = true;
					
					var time = setInterval(() => {
					  var second = vm.second;
					  second--;
					  vm.second = second;
				
					  if (second == 0) {
						clearInterval(time);
						vm.second = 5
						vm.status = false;
					  }
					}, 1000);
					
				},
				
			}
		})
	</script>
</html>