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 30 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
基于vue的验证码组件的示例代码
Jan 22 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
微信小程序实现滚动Tab选项卡
Nov 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
Vuex 入门教程
2018/01/10 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
详解Python核心对象类型字符串
2018/02/11 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
幼儿园毕业典礼主持词
2014/03/21 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
 python中的元类metaclass详情
2022/05/30 Python