Vue里面watch的使用案例

最新推荐文章于 2023-05-21 18:02:24 发布

Eason-Chan2010

最新推荐文章于 2023-05-21 18:02:24 发布

阅读量792

点赞数

本文链接：https://blog.youkuaiyun.com/m0_37064867/article/details/88958276

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>V-model</title>
       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   </head>
   <body>
       <div id="app">
           <input type="text" v-model="firstname"> +
           <input type="text" v-model="lastname"> =
           <input type="text" v-model="fullname">

       </div>
       <script>
           var vm = new Vue({
               el: '#app',
               data: {
                   firstname: '',
                   lastname: '',
                   fullname: ''
               },
               methods: {

               },
               watch:{
                   firstname:function(newVal, oldVal){
                       this.fullname = newVal + '----' + this.lastname
                   },
                   lastname:function(newVal, oldVal){
                       this.fullname =this.firstname + '----' + newVal
                   }
               }
           });
       </script>
   </body>