导入vue.js
<script src="vue-2.5.17.js"></script>
1.回车换行 提交表单
方法一
<div id="app">
<input type="text" v-model="name" @keydown.13="mouse(0)">{{name}}<br>
<input type="password" v-model="pwd" @keydown.13="mouse(1)"> {{pwd}}<br>
<input type="submit" value="heh" @click="login()" /><br>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
mouse(index) {
var inputs = document.getElementsByTagName("input");
inputs[index + 1].focus();
// inputs[index + 1].select()
},
login() {
alert('登录成功！')
}
}
})
方法二
<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" @click="login()" /><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]) {
inputs[i + 1].focus();
break;
}
}
},
login() { //当焦点落在提交按钮上时 回车提交
alert(1);
// document.getElementById("myForm").submit();
}
}
})
</script>
2. 文本框只允许输入0-9数字
方法一
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
方法2
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){//方法1 ascii码判断
console.log(e.keyCode)
var code= e.keyCode
if(code>=48&&code<=57){//0-9数字对应的ascii码
}else if(code===8){ //允许文本框删除 8是删除键ascil码
}else{
//输入非数字按键 阻止事件发生，阻止事件默认行为
e.preventDefault()
}
} ,
show2(e){ //方法2 正则判断 删除键
var a = e.key.replace(/[^\d]/g, "");
if(!a){
e.preventDefault();
}
}
}
})
</script>
3. 跑马灯
<!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然后传入函数内 this就是代表当前的vue对象
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>
祝你幸福
送你一首歌《这些民谣 - 一次听个够》翁大涵
附图 武大情书大赛第一名