1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <input type="text" v-model="firstName" > + 12 <input type="text" v-model="lastName" > = 13 <input type="text" v-model="fullName"> 14 </div> 15 <script> 16 const vm = new Vue({ 17 el:'#app', 18 data:{ 19 firstName:'', 20 lastName:'', 21 fullName:'' 22 }, 23 methods:{}, 24 watch:{ // 使用这个 属性，可以监视data 中指定数据的变化，然后出发这个 watch 中对应的 function 处理函数 25 'firstName':function (newValue,oldValue) { 26 this.fullName = newValue + this.lastName 27 }, 28 'lastName':function (newValue) { 29 this.fullName = this.firstName + newValue 30 } 31 } 32 }) 33 </script> 34 </body> 35 </html>