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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
shiro授权的实现原理
Sep 21 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
JavaScript实现简单图片切换
Apr 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
调频问题解答
2021/03/01 无线电
php公用函数列表[正则]
2007/02/22 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
浅析php单例模式
2014/11/25 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
浅析javascript的return语句
2015/12/15 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
Python生成短uuid的方法实例详解
2018/05/29 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python处理document文档保留原样式
2019/09/23 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python爬虫容易学吗
2020/06/02 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
日语专业个人的求职信
2013/12/03 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
4s店活动策划方案
2014/08/25 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
自主招生英文自荐信
2015/03/25 职场文书
通知函格式范文
2015/04/27 职场文书
西安事变观后感
2015/06/12 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Python中itertools库的四个函数介绍
2022/04/06 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript