VUE 注册验证码页面实例

代码如下无css

<template><div><header><router-link to="/inon"><i class="el-icon-back" ></i></router-link><p>手机号码验证</p></header><main><p>为了安全，我们会向手机发送验证码</p><div><input type="text" maxlength="1" tabindex="0" ref="a1" v-on:input="$refs.a2.focus()"><input type="text" maxlength="1" ref="a2" v-on:input="$refs.a3.focus()"><input type="text" maxlength="1" ref="a3" v-on:input="$refs.a4.focus()"><input type="text" maxlength="1" ref="a4" v-on:input="submit()"></div></main></div></template>

export default {name:'trans',data:function(){return{time:5,show:false,CountDown:true,}},methods:{submit(){alert("注册成功");},Time(){let t =setInterval(()=>{this.time--;if(this.time==0){clearInterval(t);this.show=true;this.CountDown=false;this.tttime=5;}},1000)},TTTime(){this.time=5this.show=false;this.CountDown=true;let t=setInterval(()=>{this.time--;if(this.time==0){clearInterval(t);this.show=true;this.CountDown=false;}},1000)}},mounted() {this.$refs.a1.focus();this.Time();},
}

转载于:https://www.cnblogs.com/banyuege/p/9911889.html

VUE 注册验证码页面实例相关推荐

vue重构html css,使用vue重构资讯页面的实例代码解析
从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在 ...
用vue+element-ui快速写一个注册登录页面
vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码:  <template><div ...
挖坑指南：如何在引用的外部js文件中获取vue页面实例？（独家）
原文链接前言在基于iView的后台项目中,表格组件是我们的老朋友了.实现如下的效果更是最基本的需求: 开始在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用),想要渲染这样的效果 ...
vue+vant 实现手机号获取验证码页面
vue+vant 实现手机号获取验证码页面 html <van-field label="手机号"v-model="phone"centerrequir ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
旅游系统（SSM框架+MySQL+Redis+VUE）前端页面代码
旅游系统(SSM框架+MySQL+Redis+VUE)前端页面代码文章目录旅游系统(SSM框架+MySQL+Redis+VUE)前端页面代码主页登录页注册页注册成功头部尾部收藏我的 ...
Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...
thinkphp6 + vue 整合验证码功能
前要: 登陆页面需要添加验证码,正常thinkphp6发送的验证码图片是以session方式进行验证的.发送到vue以后,img src='captcha' 然后再提交登陆form,这时候即使vue携 ...
PHP邮箱注册验证码功能实现（使用PHPMailer）
PHP邮箱注册验证码功能实现前言 php使用PHPMailer类进行邮件发送点击获取验证码前言本文实现的功能是在网站注册账号时,发送邮箱验证码,并验证邮箱验证码是否正确.下面会对php的邮件发 ...

VUE 注册验证码页面实例

VUE 注册验证码页面实例相关推荐

最新文章

热门文章