欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-03 14:47:07
前言 最近公司用vue框架写交互,之前没怎么写过,但是很多数据双向绑定的东东跟angular很像!所以上手很快!哈哈 今天就碰到一个vue的问题啊!!产品需求是,d...

前言

最近公司用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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。