Vue.Js中的$watch()方法总结

最新推荐文章于 2024-10-01 23:29:04 发布

zhaohua0317

最新推荐文章于 2024-10-01 23:29:04 发布

阅读量2.4k

点赞数 1

分类专栏： Vue.js

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

最近公司用vue框架写交互，之前没怎么写过，但是很多数据双向绑定的东东跟angular很像！所以上手很快！哈哈

今天就碰到一个vue的问题啊！！产品需求是，datetimepick时间选择器一更改时间，就重新ajax获取数据渲染图表，很简单的需求啊！用angula ng-change监听inpu框框，分分钟搞定啊！用特么js原生 on-change也分分钟搞定啊！问题是尼玛的VueJs对input框没有change事件！尼玛坑爹啊！（不知道是不是我没找到，反正api里没有，goole了半天，也没有，要是有的话，麻烦留言告诉我，谢谢！！）

翻了半天api最后换了$watch()方法，才搞定这个需求，我梳理了方法如下，$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！

示例代码

 
        var 
        v_assetManage_controller =  
        new 
        Vue({  
       
        el:  
        '.LSee-index' 
        ,  
       
        data: {  
       
        trendQueryTimeCtr: {  
       
        startTime:  
        '' 
        ,  
       
        endTime:  
        '' 
       
        }  
       
        },  
       
        ready:  
        function 
        () {  
       
        //  
       
        },  
       
        methods: {  
       
        queryTrendData:  
        function 
        (){  
       
        //do some here  
       
        }  
       
        },  
       
        watch: {  
       
        'trendQueryTimeCtr.startTime' 
        :  
        'queryTrendData' 
        ,  
       
        'trendQueryTimeCtr.endTime' 
        :  
        'queryTrendData' 
       
        }  
       
        });