<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--插值表达式 -->
{{message}}<br/>
{{username}}
</div>
<!--事件绑定 -->
<button v-on:click="fun1('aaaaa')" id="app2">
{{message}}
</button>
<!--阻止键盘事件 -->
<hr />
<div id="vueKeyDown">
<!--查看数字键的keycode-->
键盘keyCode:{{number}}
<input type="text" v-on:keydown="fun($event)" />
</div>
</body>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"hello vue!",
username:"cy!"
}
})
new Vue({
el:"#app2",
data:{
message:"hello"
},
methods:{
fun1:function(msg){
this.message=msg;
}
}
});
new Vue({
el:"#vueKeyDown",
data:{
number:""
},
methods:{
fun:function(event){
//如果没有效果注意输入法，应该为英文，中文的输入法键盘都是229
//alert(event.keyCode)
var keyCode=event.keyCode;
if(keyCode<48 || keyCode >57){
//按键不起作用
event.preventDefault();
}else{
//赋值给number
this.number=event.keyCode;
}
}
}
})
</script>
</html>
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
