键盘事件一

 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>