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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
JS中的作用域链
Mar 01 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php中rename函数用法分析
2014/11/15 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
js实现开关灯效果
2020/03/30 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python实现AES加密和解密
2019/03/27 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
关键字final的用法
2013/10/02 面试题
中学生打架检讨书
2014/10/13 职场文书
党的群众路线调研报告
2014/11/03 职场文书
医院科室评语
2015/01/04 职场文书
教师工作态度自我评价
2015/03/05 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Python中的嵌套循环详情
2022/03/23 Python