【Vue】input框自动聚焦且输入验证码后跳至下一位

场景:PC端
样式:
   <div class="verification-code-input"><input v-model="code[index]" v-for="(_, index) in 5" :key="index" type="text" maxlength="1"   @input="handleInput(index)" :ref="'inputRefs' + index" class="input-item"></div>
函数:
数据:   code: ['', '', '', '', '', ''],  handleInput(index) {// 限制每个input只能输入一个字符// 这里还可以添加其他逻辑,比如验证码格式验证const value = this.code[index];if (value.length === 1 && index < 4) {this.$nextTick(() => {this.$refs[`inputRefs${Number(index) + 1}`][0].focus();});}console.log(this.code);if (index == 4) {   这个场景的验证码是5位数console.log('输入完毕');}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/15517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渲染管线——应用阶段

知识必备——CPU和GPU 应用阶段都做了什么 应用阶段为渲染准备了什么 1.把不可见的数据剔除 2.准备好模型相关数据&#xff08;顶点、法线、切线、贴图、着色器等等&#xff09; 3.将数据加载到显存中 4.设置渲染状态&#xff08;设置网格需要使用哪个着色器、材质、光源属性等…

说些什么好呢

大一&#xff1a;提前学C和C。学完语法去洛谷或者Acwing二选一&#xff0c;刷300道左右题目。主要培养编程思维&#xff0c;让自己的逻辑能够通过代码实现出来。 现在对算法有点感兴趣但是没有天赋&#xff0c;打不了acm&#xff0c;为就业做准备咯。 大二(算法竞赛)&#xff1…

常用损失函数学习

损失函数&#xff08;Loss Function&#xff09;&#xff0c;在机器学习和统计学中&#xff0c;是用来量化模型预测输出与真实结果之间差异的函数。简而言之&#xff0c;损失函数衡量了模型预测的好坏&#xff0c;目标是通过最小化这个函数来优化模型参数&#xff0c;从而提高预…

简述js的事件循环以及宏任务和微任务

前言 在JavaScript中&#xff0c;任务被分为同步任务和异步任务。 同步任务&#xff1a;这些任务在主线程上顺序执行&#xff0c;不会进入任务队列&#xff0c;而是直接在主线程上排队等待执行。每个同步任务都会阻塞后续任务的执行&#xff0c;直到它自身完成。常见的同步任…

【机器学习】机器学习与大型预训练模型的前沿探索:跨模态理解与生成的新纪元

&#x1f512;文章目录&#xff1a; &#x1f4a5;1.引言 ☔2.跨模态理解与生成技术概述 &#x1f6b2;3.大型预训练模型在跨模态理解与生成中的应用 &#x1f6f4;4.前沿探索与挑战并存 &#x1f44a;5.未来趋势与展望 &#x1f4a5;1.引言 近年来&#xff0c;机器学习领…

著名书法家王杰宝做客央视频《笔墨写人生》艺坛人物经典访谈节目

印象网北京讯&#xff08;张春兄、冯爱云&#xff09;展示艺术风采&#xff0c;构建时代精神。5月25日&#xff0c;著名书法家、羲之文化传承人王杰宝&#xff0c;做客央视频《笔墨写人生》艺坛人物经典访谈节目&#xff0c;与中央电视台纪录频道主持人姚文倩一起&#xff0c;分…

MyBatis 中的动态 SQL 的相关使用方法(Javaee/MyBatis)

MyBatis 的动态 SQL 是一种强大的特性&#xff0c;它可以让你在 XML 映射文件内&#xff0c;根据不同的条件编写不同的 SQL 语句。MyBatis 动态 SQL 主要元素有&#xff1a; <if>: 根据提供的条件来动态拼接 SQL。 接口定义 Integer insertUserByCondition(UserInfo u…

c++ list容器

std::list 是 C 标准库中的一个双向链表容器。与 std::vector&#xff08;动态数组&#xff09;和 std::deque&#xff08;双端队列&#xff09;不同&#xff0c;std::list 的元素在内存中不是连续存储的&#xff0c;而是分散存储并通过节点进行连接。这使得 std::list 在插入和…

SpringBoot 集成 ChatGPT(附实战源码)

建项目 项目结构 application.properties openai.chatgtp.modelgpt-3.5-turbo openai.chatgtp.api.keyREPLACE_WITH_YOUR_API_KEY openai.chatgtp.api.urlhttps://api.openai.com/v1/chat/completionsopenai.chatgtp.max-completions1 openai.chatgtp.temperature0 openai.cha…

全局平均池化笔记

全局平均池化&#xff08;Global Average Pooling, GAP&#xff09;是一种用于卷积神经网络&#xff08;CNN&#xff09;中的池化操作&#xff0c;其主要作用和优点包括&#xff1a; 减少参数数量&#xff1a;全局平均池化层将每个特征图通过取其所有元素的平均值&#xff0c;压…

ubuntu安装yum方法【最新可用】

一、安装命令 在根目录&#xff08;root&#xff09;下执行 sudo apt-get install build-essential sudo apt-get install yum二、出错处理 1、E: Package yum has no installation candidate 解决&#xff1a;更换镜像源&#xff0c;找到自己的系统版本用vim进行更换&#xff…

make是什么

make是什么工具 make是一个自动化编译工具,它本身并没有编译和链接的功能,而是用类似于批处理的方式——通过makefile文件中指示的依赖关系,调用makefile文件中使用的命令来完成编译和链接的。makefile文件中记录了源代码文件之间的依赖关系,并说明了如何编译各个源代码文…

GmSSL3.X编译iOS和Android动态库

一、环境准备 我用的Mac电脑编译&#xff0c;Xcode版本15.2&#xff0c;安卓的NDK版本是android-ndk-r21e。 1.1、下载国密源码 下载最新的国密SDK源码到本地。 1.2、安装Xcode 前往Mac系统的AppStore下载安装最新Xcode。 1.3、安卓NDK下载 下载NDK到本地&#xff0c;选…

Protobuf - 语法、字段使用规则、注意事项

目录 前言 一、Protobuf 基本语法 1.1、Protoc 版本 1.2、文件格式配置 1.3、消息字段规则 1.3.1、字段数据类型 1.3.2、字段修饰规则 1.3.3、消息类型定义 1.3.4、enum 类型 1.3.5、Any 类型 1.3.6、oneof 类型 1.3.7、map 类型 1.3.8、默认值 1.3.9、更新消息…

css设置文字在固定宽度中等距分开(仅限于单行文本)

一、要实现的效果&#xff1a; 二、代码 要在CSS中设置文本在一个固定宽度的容器中等距分开&#xff0c; 可以使用text-align: justify;属性&#xff0c;它可以让文本两端对齐&#xff0c;看起来就像是等距分开的。 但是要注意&#xff0c;单独使用text-align:justify;只能对单…

机器学习 - 模型训练

机器学习&#xff08;Machine Learning&#xff0c;ML&#xff09;是利用计算机算法和统计模型&#xff0c;使计算机系统在没有明确编程的情况下执行特定任务的过程。机器学习的整个过程可以分为以下几个主要步骤&#xff1a; 训练步骤 问题定义与需求分析 目标设定&#xff1…

【Qt】Qt多元素控件深入解析与实战应用:列表(QListWidget)、表格(QTableWidget)与树形(QTreeWidget)结构

文章目录 前言&#xff1a;Qt中多元素控件&#xff1a;1. List Widget1.1. 代码示例: 使用 ListWidget 2.Table Widget2.1. 代码示例: 使用 QTableWidget 3. Tree Widget3.1. 代码示例: 使用 QTreeWidget 总结&#xff1a; 前言&#xff1a; 在Qt框架中&#xff0c;用户界面的…

2024.5.25

package com.Swork.file;import java.io.File; import java.io.IOException; import java.util.Date;public class Demo1 {public static void main(String[] args) {//1,构造文件对象System.out.println("1,构造文件对象");File file new File("D://Work//Fil…

C语言内存函数超详细讲解

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 C语言内存函数超详细讲解 收录于专栏【C语言学习】 本专栏旨在分享学习C语言学习的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. m…

C++面向对象程序设计-北京大学-郭炜【课程笔记(十一)】

C面向对象程序设计-北京大学-郭炜【课程笔记&#xff08;十一&#xff09;】 1、string&#xff08;重要知识点&#xff09;1.2、string的赋值和链接1.3、比较string1.4、子串1.5、交换string1.6、寻找string中的字符1.7、删除string中的字符1.8、替换string中的字符1.9、在str…