1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id="vue-app"> 10 <h1>双向数据绑定 /input / select /textarea</h1> 11 <label>姓名:</label> 12 <!-- <input type="text" @keyup.enter="logName"> --> 13 <input ref="msg" type="text" v-on:keyup="logName"> 14 15 <input type="text" v-model="name"> 16 <p>{{ name }}</p> 17 <label>年龄</label> 18 <input ref="age" type="text" v-on:keyup="logAge"> 19 <span>{{ age }}</span> 20 </div> 21 22 23 <script src="app.js"></script> 24 </body> 25 </html>
1 new Vue({ 2 el:'#vue-app', 3 data:{ 4 name:'', 5 age:'' 6 }, 7 methods:{ 8 logName:function(){ 9 //console.log('你在输入名称'); 10 // this.name=this.$refs.name.value; 11 console.log(this.$refs.msg.value) 12 }, 13 logAge:function(){ 14 // console.log('你在输入年龄'); 15 this.age=this.$refs.age.value; 16 } 17 } 18 })