侦听器-watch

最新推荐文章于 2023-12-27 15:50:49 发布

m0_62782752

最新推荐文章于 2023-12-27 15:50:49 发布

阅读量73

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_62782752/article/details/134819893

版权

<div id="app">
        <input type="text" v-model="obj.s">
    
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                obj:{s:"1"},
            },
            watch:{
                // 一个值的 变化 ，影响 一些值的变化 。。watch可以 异步操作  ------ computed 
                          不可以异步操作
              /*
                obj:function(newVal,oldVal){
                    console.log('newVal', newVal)
                    console.log('oldVal', oldVal)
                }
                */

                obj:{
                    handler(n){
                        console.log(n)
           
                    },
                    deep:true ,// 深度监听
                    immediate:true //immediate ：	立即的; 立刻的; 目前的; 当前的
                }
                
            }
        })




      
    </script>

上面是引用数据类型 , 下面是基本数据类型

 <div id="app">
        <input type="text" v-model="s">
    


        <h1>{{ y }}</h1>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                s:"",
                y:""
            },
            watch:{
                // 一个值的 变化 ，影响 一些值的变化 。。watch可以 异步操作  ------ computed 
                            不可以异步操作
                s:function(newVal,oldVal){
                    console.log('newVal', newVal)
                    console.log('oldVal', oldVal)

                    setTimeout(()=>{
                        this.y="ajax搜索后的结果"+newVal

                    },2000)
                    

                }
                
            }
        })
    </script>