Vue.directive('foces',{
update:function(el,{value}){
var a=el.className.substring(el.className.length-1);
if(a==value){
el.focus();
}
}
})
var vm=new Vue({
el:"#app",
data:{
ip1:null,
focesindex:1,
ip2:null,
ip3:null,
ip4:null,
},computed:{
allip:function(){
return this.ip1+"."+this.ip2+"."+this.ip3+"."+this.ip4;
}
},watch:{
ip1:function(newIp1){
if(!this.ip1){
return;
}
this.focesindex=1;
if(isNaN(newIp1) || newIp1>223){
alert(newIp1+"不是个有效项目，请指定一个介于1和223之间的数值");
this.ip1=null;
}else{
this.ip1=newIp1;
if(newIp1.length==3){
this.focesindex=2;
}
}
},ip2:function(newIp1){
if(!this.ip2){
return;
}
this.focesindex=2;
if(isNaN(newIp1) || newIp1>255){
alert(newIp1+"不是个有效项目，请指定一个介于1和255之间的数值");
this.ip2=null;
}else{
this.ip2=newIp1;
if(newIp1.length==3){
this.focesindex=3;
}
}
},ip3:function(newIp1){
if(!this.ip3){
return;
}
this.focesindex=3;
if(isNaN(newIp1) || newIp1>255){
alert(newIp1+"不是个有效项目，请指定一个介于1和255之间的数值");
this.ip3=null;
}else{
this.ip3=newIp1;
if(newIp1.length==3){
this.focesindex=4;
}
}
},ip4:function(newIp1){
if(!this.ip4){
return;
}
this.focesindex=4;
if(isNaN(newIp1) || newIp1>255){
alert(newIp1+"不是个有效项目，请指定一个介于1和255之间的数值");
this.ip4=null;
}else{
this.ip4=newIp1;
}
}
}
})
</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>