vue制作短信验证码输入框

最新推荐文章于 2024-12-02 11:11:38 发布

JustDoIt521

最新推荐文章于 2024-12-02 11:11:38 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript vue 文章标签： JustDoIt521

本文链接：https://blog.youkuaiyun.com/qq_34119437/article/details/83587322

本文介绍了如何使用Vue.js创建一个具有实际效果的短信验证码输入框。通过HTML、JavaScript和CSS代码展示实现过程。

先上最终效果（此处代码显示的是短信验证码框的效果其余部分并未放上去）

html


			<div class="code">
				<input id="first" class="inputStyle" v-model="code[0]"
				style="border-top-left-radius: 12px;
				border-bottom-left-radius: 12px;"
				type="text"/>
				<input id="second" class="inputStyle" v-model="code[1]"style="border-left:1px solid #c6c6c6;" type="text"/>
				<input id="third" class="inputStyle" v-model="code[2]"style="border-left:1px solid #c6c6c6;" type="text"/>
				<input id="forth" class="inputStyle" v-model="code[3]" style="border-left:1px solid #c6c6c6;" type="text"/>
				<input id="fifth"class="inputStyle" v-model="code[4]"
				style="border-top-right-radius: 12px;
				border-bottom-right-radius: 12px;
				border-left:1px solid #c6c6c6;" 
				maxlength="1"
				t