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

╰+哭是因爲堅強的太久メ 2021-11-04 11:44 334阅读 0赞

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     
    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>

转载于:https://www.cnblogs.com/songsongblue/p/11010818.html