第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化

 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>
posted on 2019-06-12 17:07 songsong_p_blue 阅读(461) 评论(0) 收藏举报