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中常见陷阱小结
Apr 27 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
详解vue引入子组件方法
Feb 12 Javascript
JS实现拖动模糊框特效
Aug 25 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
第十三节 对象串行化 [13]
2006/10/09 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
团组织关系介绍信
2014/01/12 职场文书
火车来了教学反思
2014/02/11 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android