vue使用watch实现事件监听

watch监听的数据对应的函数,有两个参数,一个是在原有的值上增加的值,一个是原有的值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../util/vue-2.4.0.js"></script>
 7 </head>
 8 <body>
 9 <div id="test">
10     <input type="text" v-model="firstname"> +
11     <input type="text" v-model="lastname"> =
12     <input type="text" v-model="fullname">
13 </div>
14 <script>
15     var vm1 = new Vue({
16         el:"#test",
17         data:{
18             firstname:"",
19             lastname:"",
20             fullname:""
21         },
22         methods:{},
23         created(){},
24         components:{},
25         router:{},
26         watch:{
27             "firstname":function (newValue,oldValue) {
28                 this.fullname = newValue + this.lastname
29             },
30             "lastname":function (newValue,oldValue) {
31                 this.fullname = this.firstname + newValue
32             }
33         }
34     })
35 </script>
36 </body>
37 </html>