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>  
  • 相关阅读:
    .net常用框架总结
    微信小程序 语音转换
    nginx+redis实现session共享 .NET分布式架构
    Redis 安装及注册服务
    WebApi跨域
    Uri各个属性取值测试
    一些常用的FFMPEG命令集合
    动态规划重学习笔记
    给自己的电脑时间进行精准校时
    [NOI题库][POJ2536][匈牙利算法][二分图最大匹配]Gopher II
  • 原文地址:https://www.cnblogs.com/hsdying/p/7449565.html
Copyright © 2011-2022 走看看