vue验证码怎么用(vue验证码组件使用方法详解)
类别:编程学习 浏览量:1091
时间:2021-10-10 00:02:01 vue验证码怎么用
vue验证码组件使用方法详解本文实例为大家分享了vue验证码组件使用的具体实现代码,供大家参考,具体内容如下
代码如下:
<template> <li class="join_formitem"> <label class="enquiry">验证码<span>:</span></label> <li class="captcha"> <input type="text" placeholder="请输入验证码" class="yanzhengma_input" v-model="picLyanzhengma" /> <input type="button" @click="createdCode" class="verification" v-model="checkCode" /> </li> </li> </template> <script> export default { data(){ return{ code:'', checkCode:'', picLyanzhengma:'' //..验证码图片 } }, created(){ this.createdCode() }, methods: { // 图片验证码 createdCode(){ // 先清空验证码输入 this.code = "" this.checkCode = "" this.picLyanzhengma = "" // 验证码长度 const codeLength = 4 // 随机数 const random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z') for(let i = 0;i < codeLength;i++){ // 取得随机数的索引(0~35) let index = Math.floor(Math.random() * 36) // 根据索引取得随机数加到code上 this.code += random[index] } // 把code值赋给验证码 this.checkCode = this.code } } } </script> <style> .yanzhengma_input{ font-family: 'Exo 2',sans-serif; border: 1px solid #fff; color: #fff; outline: none; border-radius: 12px; letter-spacing: 1px; font-size: 17px; font-weight: normal; background-color: rgba(82,56,76,.15); padding: 5px 0 5px 10px; margin-left: 30px; height: 30px; margin-top: 25px; border: 1px solid #e6e6e6; } .verification{ border-radius: 12px; width: 100px; letter-spacing: 5px; margin-left: 50px; height: 40px; transform: translate(-15px,0); } .captcha{ height:50px; text-align: justify; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue 中后台管理系统(Vue实现学生管理功能)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue组件之间的通信(超详细的vue组件间通信总结)
- vue购物车简单项目(vue实现简单购物车案例)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
- 《极限挑战》深访都市夜归人,夜间打工者体验,黄磊录完憔悴了(极限挑战深访都市夜归人)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
热门推荐
- thinkphp从模板自定义标签(Thinkphp5.0框架视图view的循环标签用法示例)
- sqlserverlog原理(sql server中错误日志errorlog的深入讲解)
- javascript如何获取后台数据(JavaScript实现异步获取表单数据)
- dedecms搜索功能怎么设置详细(删除dedecms 5.7里面烦人的织梦链的方法)
- mariadb导入数据库命令(MySQL/MariaDB 如何实现数据透视表的示例代码)
- UML对象图的介绍
- mongodb query查询
- hbuilderx怎么创建web项目(HBuilder如何设置web服务器)
- 阿里云服务器怎么设置安全(详解阿里云服务器添加安全组规则图文教程)
- mysql分区表的优缺点(MySQL数据表分区策略及优缺点分析)