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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
ajax与302响应代码测试
Oct 23 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
javascript表单正则应用
Feb 04 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP fclose函数用法总结
2019/02/15 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
JQuery中Bind()事件用法分析
2015/05/05 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
分析python请求数据
2018/08/19 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python3.6数独问题的解决
2019/01/21 Python
python将字母转化为数字实例方法
2019/10/04 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
关于Python错误重试方法总结
2021/01/03 Python
初一英语教学反思
2014/01/11 职场文书
面试自我评价范文
2014/09/17 职场文书
公司股份合作协议书
2014/12/07 职场文书
在职证明书模板
2015/06/15 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers