Day4.11名称案例-watch监听文本框数据变化

 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>