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

前言

最近公司用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'
}
});

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用vue.js能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

• 解决Vue2.0 watch对象属性变化监听不到的问题
• Vue2.0用 watch 观察 prop 变化(不触发)
• Vue数据监听方法watch的使用
• 深入对Vue.js $watch方法的理解
• vue首次赋值不触发watch的解决方法