Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。具体的用法可以直接看下面的示例,简单直接。

 

 

<div />  
    <input type="text" v-model:value="lastName" />  
</div>  
  
<script type="text/javascript">     
    var vm = new Vue( {  
        el: '#app',  
        data: {  
            childrens: {  
                name: '小强',  
                age: 20,  
                sex: '男'  
            },  
            tdArray:["1","2"],  
            lastName:"张三"  
        },  
        watch:{  
            childrens:{  
                handler:function(val,oldval){  
                    console.log(val.name)  
                },  
                deep:true//对象内部的属性监听,也叫深度监听  
            },  
            'childrens.name':function(val,oldval){  
                console.log(val+"aaa")  
            },//键路径必须加上引号  
            lastName:function(val,oldval){  
                console.log(this.lastName)  
            }  
        },//以V-model绑定数据时使用的数据变化监测  
    } );  
    vm.$watch("lastName",function(val,oldval){  
        console.log(val)  
    })//主动调用$watch方法来进行数据监测</span>  
</script>  
</body>  

相关文章:

  • 2021-12-30
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2023-01-20
  • 2022-12-23
  • 2022-12-23
  • 2021-08-15
  • 2022-12-23
  • 2021-08-24
  • 2021-10-10
相关资源
相似解决方案