1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 16 <!-- 分析： --> 17 <!-- 1.我们要监听到 文本框数据的改变，这样才能知道什么时候去拼接 出一个 fullname --> 18 <!-- 2.如何监听到 文本框的数据改变呢？？？--> 19 <input type="text" v-model="firstname" @keyup="getFullName">+ 20 <input type="text" v-model="lastname" @keyup="getFullName">= 21 <input type="text" v-model="fullname"> 22 </div> 23 24 <script> 25 //创建 Vue 实例，得到 ViewModel 26 var vm = new Vue({ 27 el:'#app', 28 data:{ 29 firstname:'', 30 lastname:'', 31 fullname:'' 32 }, 33 methods:{ 34 getFullName(){ 35 this.fullname=this.firstname+'-'+this.lastname 36 } 37 } 38 }); 39 </script> 40 </body> 41 </html>