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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
javascript每日必学之封装
Feb 23 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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连接mysql数据库最简单的实现方法
2019/09/24 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
js 操作符实例代码
2009/10/24 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python requests.post带head和body的实例
2019/01/02 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
高二生物教学反思
2014/01/27 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
质检员岗位职责
2015/02/03 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript