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


Posted in Javascript onMarch 23, 2017

前言

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

Javascript 相关文章推荐
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 #Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
JS中SetTimeout和SetInterval使用初探
Mar 23 #Javascript
深入学习 JavaScript中的函数调用
Mar 23 #Javascript
js中toString()和String()区别详解
Mar 23 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php实现的mongodb操作类
2015/05/28 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
javascript实现文字无缝滚动效果
2017/08/26 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
岗位职责风险点
2014/03/12 职场文书
海洋科学专业求职信
2014/08/10 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
关于召开会议的通知
2015/04/15 职场文书