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>
- 文本框只允许输入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>
- 跑马灯
<!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>
祝你幸福
送你一首歌《这些民谣 - 一次听个够》翁大涵
附图 武大情书大赛第一名