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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
javascript中的delete使用详解
Apr 11 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Python进行数据提取的方法总结
2016/08/22 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python django生成迁移文件的实例
2019/08/31 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Python json格式化打印实现过程解析
2020/07/21 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
Overload和Override的区别
2012/09/02 面试题
中科前程Java笔试题
2016/11/20 面试题
劳资专员岗位职责
2013/12/27 职场文书
快递业务员岗位职责
2014/01/06 职场文书
停车场管理协议书范本
2014/10/08 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
西游记读书笔记
2015/06/25 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书