Watch 监听

快来打我* 2022-12-05 00:58 304阅读 0赞

第一种 普通监听

  1. <input type="text" v-model="userName"/> 
  2. data (){ 
  3.     return { 
  4.         userName: ''
  5.     }
  6. },
  7. //监听 当userName值发生变化时触发
  8. watch: { 
  9.     userName (newVal,oldVal) { 
  10.         console.log(newVal)
  11.     }
  12. }

第二种 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，
只有当值改变的时候 才会执行，如果想在第一次绑定的时候执行此监听函数 则需要 设置 immediate: true

  1. <input type="text" v-model="userName"/> 
  2. data (){ 
  3.     return { 
  4.         userName: ''
  5.     }
  6. },
  7. watch: { 
  8.     userName: { 
  9.         handler (newVal,oldVal) { 
  10.             console.log(newVal)
  11.         },
  12.         immediate: true
  13.     }
  14. }

第三种深度监听 当要监听对象或数组的时候需要添加deep:true属性

  1. <input type="text" v-model="cityName.name" />
  2. data (){ 
  3.     return { 
  4.         cityName: { name:'北京'}
  5.     }
  6. },
  7. watch: { 
  8.     cityName: { 
  9.         handler(newVal,oldVal) { 
  10.             console.log(newVal)
  11.         },
  12.         immediate: true,
  13.         deep: true
  14.     }
  15. }

发表评论

表情：
评论列表 （有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读