使用Vue实现IP地址的输入和焦点的自动切换

自己尝试得写过,但是总感觉差点什么,如果涉及到您得版权问题请联系我

阳光先做

3169人浏览 · 2018-02-26 09:30:08

阳光先做 · 2018-02-26 09:30:08 发布

</script>

-------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<style>
.input1{
border:0px;width: 50px;text-align: center;
}.input2{
border:0px;width: 50px;text-align: center;
}.input3{
border:0px;width: 50px;text-align: center;
}.input4{
border:0px;width: 50px;text-align: center;
}
.active{
color:red
}
</style>
<body>
<div style="border: 2px;" id="app">
<div>
<input maxlength="3" v-foces="focesindex" placeholder="1-223" class="input1" type="text" v-model="ip1"/>.
<input maxlength="3" v-foces="focesindex" placeholder="0-255" class="input2" type="text" v-model="ip2"/>.
<input maxlength="3" v-foces="focesindex" placeholder="0-255" class="input3" type="text" v-model="ip3"/>.
<input maxlength="3" v-foces="focesindex" placeholder="0" class="input4" type="text" v-model="ip4"/>.
</div>
</div>
</div>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^