VUE 回车换行提交表单 跑马灯效果 只允许文本框中输入0-9数字

导入vue.js

<script src="vue-2.5.17.js"></script>

1.回车换行 提交表单

 <div id="app">
 
     <input type="text" v-model="name" ref="panel"  @keydown.13="mouse($refs.panel)"   >{{name}}<br>
     <input type="password" v-model="pwd" ref="panel2"  @keydown.13="mouse($refs.panel2)"> {{pwd}}<br> 
     <input type="submit" value="heh"  /><br>
  
</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"",
            pwd:""

        },
        methods:{
            mouse(e){
            	console.log(e)
            	 var inputs = document.getElementsByTagName("input");
            	 //获取登录页面的input标签 
            	 for(var i = 0;i<inputs.length;i++){
            	 	//循环input标签的数量 
            	 	// 如果是最后一个,则焦点回到第一个。(这个你可以选择去掉)            	 	
            	 	if(i==(inputs.length-1)){
            	 		inputs[0].focus(); break; 
            	 	}else if(e == inputs[i]){ 
            	 		console.log("点击事件匹配")
            	 	
            	 		var type=inputs[i+1].type
            	 		
            	 		if(type!='submit'){
            	 			console.log(inputs[i+1].type+"z")
            	 			inputs[i+1].focus();
            	 			
            	 			break;
            	 		}
            	 		 if(type==='submit'){
            	 			 console.log(inputs[i+1].type+"l")
            	 			 document.getElementById("myForm").submit();
            	 			 break;
            	 		}
            	 	
            	 		break;
            	 
            	 		} 
            	 }
 
            } 
        }
     
    })
</script>
  1. 文本框只允许输入0-9数字
     0-9<br>
    <input type="text" @keydown="show($event)"><br>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{},
        methods:{
            show(e){
                console.log(e.keyCode)
               var code= e.keyCode
                if(code>=48&&code<=57){//0-9数字对应的ascii码
                	
                }else if(code===8){  //允许文本框删除
                	
                }else{
                	e.preventDefault()
                }
                
            } 
        }
     
    })
</script>
  1. 跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
 <script src="js/vue.js"></script>
</head>
<body>
    <!--容器-->
    <div id="app">
       //点击事件绑定 <br>
       <input type="button" value="浪起来" @click="lang">  
        <h4>{{msg}}</h4>
    </div>
<script>
    // 创建一个vue实例
    var vm=new Vue({
        el:'#app',  // 绑定id为appid容器
        data:{
            msg:'---1234567---'
        },
        methods:{
            lang(){
            	
                _this=this   //将this给到_this然后传入函数内
                setInterval(function () {  //定时任务
                    //console.log(_this.msg);
                    var first=vm.msg.substring(0,1);
                    var end=_this.msg.substring(1);
                    _this.msg=end+first;
                },500);
            }
        }
    })
</script>
</body>
</html>
 

祝你幸福
送你一首歌《这些民谣 - 一次听个够》翁大涵
附图 武大情书大赛第一名
VUE 回车换行提交表单 跑马灯效果 只允许文本框中输入0-9数字