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 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
js消除图片小游戏代码
Dec 11 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
JS如何生成动态列表
2020/09/22 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
python对数组进行反转的方法
2015/05/20 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python中return不返回值的问题解析
2020/07/22 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
仓库管理计划书
2014/05/04 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
导游词之张家口
2019/12/13 职场文书