zoukankan      html  css  js  c++  java
  • 关于vue 使用watch方法,详解。

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

    <div id="app">  
        <input type="text" v-model:value="childrens.name" />  
        <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>  
  • 相关阅读:
    大型项目生产环境日志查询
    泛型接口和泛型方法
    使用360浏览器登录B站的时候,不显示搜索框
    构建之法第二周学习体验
    构建之法首周阅读体会
    C语言实例解析精粹学习笔记——26
    C语言实例解析精粹学习笔记——29
    C语言实例解析精粹学习笔记——28
    C语言实例解析精粹学习笔记——18
    C语言实例解析精粹学习笔记——30
  • 原文地址:https://www.cnblogs.com/hsdying/p/7449565.html
Copyright © 2011-2022 走看看