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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
Vue实现选择城市功能
May 27 Javascript
详解Angular2响应式表单
Jun 14 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
老生常谈JS中的继承及实现代码
Jul 06 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类
2006/07/15 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
react 组件传值的三种方法
2019/06/03 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python获得图片base64编码示例
2014/01/16 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
战友聚会邀请函
2014/01/18 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
搞笑征婚广告词
2014/03/17 职场文书
优秀大学生自荐信
2014/06/09 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
政风行风整改报告
2014/11/06 职场文书
青年文明号汇报材料
2014/12/23 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
Echarts如何重新渲染实例详解
2022/05/30 Javascript