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中的startWith和endWith的几种实现方法
May 07 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
12306验证码破解思路分享
Mar 25 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
什么是MVC,好东西啊
2007/05/03 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php ios推送(代码)
2013/07/01 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
layui实现给某一列加点击事件
2019/10/26 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python pyheatmap包绘制热力图
2018/11/09 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python设置表格边框的具体方法
2020/07/17 Python
Python设计密码强度校验程序
2020/07/30 Python
python中pickle模块浅析
2020/12/29 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS