可以在watch增加判断,当符合条件时改变data中的数据
如果要监听的是对象 则需要使用deep选项 设置为true即可

<div id="app">
  <p><input type="text" name="" id="" v-model="pig.name"></p>
  <p><input type="text" name="" id="" v-model="pig.age"></p>
  <p>姓名:{{pig.name}}</p>
  <p>性别:{{pig.sex}}</p>
  <p>年龄:{{pig.age}}</p>
  <p>身高:{{pig.height}}</p>
</div>

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    pig: {
      name: '戴小姐',
      sex: '女',
      age: '18',
      height: '160'
    }
  },
  watch: {
    pig: {
      handler(newVal) {
        console.log(newVal.name);
        if (newVal.name == '王先生') {
          newVal.age = 19;
          newVal.sex = '男';
          newVal.height = '185';
        }
      },
      immediate: false,
      deep: true
    }
  }
})

代码演示:

202105191621393854120586

属性:该值默认是false,在进入页面时,第一次绑定值,watch不会"立刻执行"监听,只有数据发生改变才会执行handler中的操作。

immediate:false,值为true或false,默认false
immediate:true,----刚进入页面的时候,watch可以立刻监听到对象中属性的值。
immediate:false时:

202105191621393914330432-1652432462122

immediate:true时:

202105191621393963889323-1652432469132