vue的watch监听

最新推荐文章于 2024-09-19 18:19:08 发布

秋雨凉人心

最新推荐文章于 2024-09-19 18:19:08 发布

阅读量74

点赞数

分类专栏：提升文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/qq_39056703/article/details/118525096

版权

提升专栏收录该内容

32 篇文章 0 订阅

订阅专栏

watch监听数据变化
使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
该方法可以不用绑定事件

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>

  

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
          fullname: ''
      },
      methods: {},
      watch: {
          'firstname': function(newVal){
              this.fullname = newVal + '-' + this.lastname
          },
          'lastname': function(newVal){
              this.fullname = this.firstname + '-' + newVal
          }
      }
    });
  </script>
</body>