键盘事件一
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>键盘事件一</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="vuetext"> 10 <h1>键盘事件一</h1> 11 <label>姓名：</label> 12 <!--按回车触发事件--> 13 <input ref="name" type="text" v-on:keyup.enter="logName"/> 14 <span>{{name}}</span><br/> 15 16 <label>年龄：</label> 17 <!--按键盘触发事件--> 18 <input ref='age' type="text" v-on:keyup="logAge"/> 19 <span>{{age}}</span> 20 21 </div> 22 <!--<script src="vue.js"></script>--> 23 <script> 24 new Vue({ 25 el:"#vuetext", 26 data:{ 27 name:'', 28 age:'' 29 }, 30 methods:{ 31 logName:function(){ 32 this.name=this.$refs.name.value; 33 console.log("你正在输入名字"+this.name); 34 }, 35 logAge:function(){ 36 this.age=this.$refs.age.value; 37 console.log("你正在输入年龄"+this.age); 38 } 39 } 40 }); 41 </script> 42 <!--${ pageContext.request.contextPath}--> 43 </body> 44 </html>
键盘事件二
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>键盘事件二</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="vuetext"> 10 <h1>键盘事件二</h1> 11 <label>姓名：</label> 13 <input ref="name" type="text" v-model="name"/> 14 <span>{{name}}</span><br/> 15 16 <label>年龄：</label> 18 <input type="text" v-model="age"/> 19 <span>{{age}}</span> 20 21 </div> 22 <!--<script src="vue.js"></script>--> 23 <script> 24 new Vue({ 25 el:"#vuetext", 26 data:{ 27 name:'张三', 28 age:'' 29 }, 30 methods:{ 31 32 } 33 }); 34 </script> 35 <!--${ pageContext.request.contextPath}--> 36 </body> 37 </html>