VUE监听

作者: 小碗吃不了 | 来源:发表于2019-09-30 15:32 被阅读0次

    写法一

    • 直接写一个监听处理函数或者所监听的数据后面直接加字符串形式的方法名

      <input type="text" v-model="cityName"/>
      new Vue({
        el: '#root',
          data: {
           cityName: 'shanghai'
       },
         watch: {
           cityName(newName, oldName) {} 或者  cityName: 'nameChange' //nameChange方法名
        } 
       })
      

    写法二

    • 监听首次绑定
      new Vue({
         el: '#root',
         data: {
           cityName: ''
      },
          watch: {
            cityName: {
            handler(newName, oldName) {},
            immediate: true
            }
          } 
      })
      
      

    写法三

    • 深度监听deep

    • 监听到对象内部属性的改变

    • 数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听

      <input type="text" v-model="cityName.name"/>
      new Vue({
        el: '#root',
        data: {
          cityName: {id: 1, name: 'shanghai'}
        },
        watch: {
          cityName: {
          handler(newName, oldName) {},
          deep: true,
          immediate: true
        }
      } 
      })
      
      
    • 指定对某一属性值监听

      watch: {
          'cityName.name': {
            handler(newName, oldName) {},
            deep: true,
            immediate: true
        }
      }

    相关文章

      网友评论

          本文标题:VUE监听

          本文链接:https://www.haomeiwen.com/subject/hxfructx.html