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 <input type="text" v-model="firstname">+ 17 <input type="text" v-model="lastname">= 18 <input type="text" v-model="fullname"> 19 </div> 20 21 <script> 22 //创建 Vue 实例，得到 ViewModel 23 var vm = new Vue({ 24 el:'#app', 25 data:{ 26 firstname:'', 27 lastname:'', 28 fullname:'' 29 }, 30 methods:{}, 31 watch:{//使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 32 //firstname的单引号''可加可不加，first-name必须要加单引号''，'firstname'对象的一个属性 33 'firstname':function(newVal,oldVal){ 34 // console.log('监听到了 firstname 的变化') 35 // this.fullname=this.firstname+'-'+this.lastname 36 37 // console.log(newVal+'---'+oldVal) 38 this.fullname=newVal+'-'+this.lastname 39 40 }, 41 'lastname':function(newVal){ 42 this.fullname=this.firstname+'-'+newVal 43 } 44 } 45 }); 46 </script> 47 </body> 48 </html>