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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
建立动态的WML站点(二)
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
php include,include_once,require,require_once
2008/09/05 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
浅析php学习的路线图
2013/07/10 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python的设计模式编程入门指南
2015/04/02 Python
Python检测QQ在线状态的方法
2015/05/09 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
Why we need EJB
2016/10/20 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
工地安全检查制度
2014/02/04 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android