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>  
  • 相关阅读:
    通过修改manifest文件来解决Vista/Win7/Win8/win10下应用程序兼容性问题
    windows下django开发环境配置
    Django网站实例效果
    手动下载Linux安装包perf
    【Nginx】负载配置
    【VIM】常用命令
    【CentOS7】SCP服务器间传文件
    【CentOS7】目录统计du命令
    【CentOS7】安装GraphicsMagick
    【Nginx】限流配置
  • 原文地址:https://www.cnblogs.com/hsdying/p/7449565.html
Copyright © 2011-2022 走看看