ts watch路由参数变化_vue 侦听（watch）

最新推荐文章于 2022-11-17 14:43:18 发布

饭太

最新推荐文章于 2022-11-17 14:43:18 发布

阅读量616

点赞数

文章标签： ts watch路由参数变化

本文链接：https://blog.csdn.net/weixin_36369605/article/details/112420204

版权

vue中通过 watch 来侦听

<body>
    <div id="app">
        <input type="text" v-model="str">
        {{str}} : {{num}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0,
            str:"嘟嘟呀嘟嘟"
        },
        watch:{//通过该对象来设置侦听
            str(){
                console.log(111);
                this.num+=1
            }
        }
    })
</script>

深度侦听

<body>
    <div id="app">
        <input type="text" v-model="obj.userName">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            obj:{
                userName:"dudu",
                age:12
            }
        },
        watch:{//通过该对象来设置侦听
            obj:{
                handler(){ //当侦听到 obj 属性发生变化时会执行该函数
                    console.log(111)
                },
                deep:true //深度侦听
            }
        }
    })
</script>

外部侦听

<body>
    <div id="app">
        <input type="text" v-model="str">
        {{str}}:{{num}}
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            str:"嘟嘟呀嘟嘟",
            num:0
        }
    });
    //第一个参数是侦听的数据名字，第二个参数是一个方法（当你侦听的数据发生变化时会执行该函数）
    vm.$watch("str",function (newValue, oldValue) {
        console.log(newValue,oldValue);
        vm.$data.num+=1;
    })
</script>

外部深度侦听

vm.$watch("str",function (newValue, oldValue) {
    console.log(newValue,oldValue);
    vm.$data.num+=1;
},{
    deep:true
})

尚学堂

饭太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ts watch路由参数变化_vue 侦听（watch）

vue中通过 watch 来侦听<body> <div id="app"> <input type="text" v-model="str"> {{str}} : {{num}} </div></body><script> new Vue({ el:"...
复制链接

扫一扫