侦听器watch

最新推荐文章于 2024-09-02 17:34:07 发布

阿里今天不上班

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量74

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_52905182/article/details/127641466

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、方法侦听器基本使用

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
</body>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            username:''
        },
       // 侦听器定义在watch下
        watch:{
            // 监听器本质是函数，监视哪个数据变化，就把数据名作为方法即可
            username(newVal,oldVal){
                if (newVal === '') return
                // 1.调用jquery中的Ajax发起请求，判断newVal是否被占用
                $.get('https://www.escook.cn/api/finduser/'+newVal,function (result) {
                    console.log(result)
                })

                console.log('监听',newVal,oldVal)
            }
        }
    })
</script>

二、对象格式侦听器

<div id="app">
  <input type="text" v-model="username">
</div>
</body>

<script>
  const vm = new Vue({
    el:'#app',
    data:{
      username:'admin'
    },
    watch: {
      // 定义对象格式的侦听器
      username: {
        // 侦听器的处理函数
        handler(newVal, oldVal){
          console.log(newVal, oldVal)
        },
        // immediate的默认为false
        // 控制监听器是否进入页面立即自动触发一次
        immediate:true
      }
    }
  })
</script>

三、深度侦听

<div id="app">
  <input type="text" v-model="info.username">
  <input type="text" v-model="info.password">
</div>
</body>

<script>
  const vm = new Vue({
    el:'#app',
    data:{
      // 用户的信息对象
      info:{
        username:'admin',
        password:'123'
       }
    },
    watch: {
      info:{
        handler(newVal){
          console.log(newVal)
        },
        // 开启深度监听，只要对象中的任何一个属性变化，都会触发对象的侦听器
        deep:true
      },
      // 如果侦听的是对象的子属性变化，则必须包裹一层单引号
      'info.password'(newVal){
        console.log(newVal)
      }
    }
  })
</script>