vue2.0$nextTick监听数据渲染完成之后的回调函数方法


Posted in Javascript onSeptember 11, 2018

vue里面本身带有两个回调函数:

一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。

另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

栗子:

...
<ul id="demo">
 <li v-for="item in list">{{item}}</div>
</ul>
...
new Vue({
 el:'#demo',
 data:{
  list=[0,1,2,3,4,5,6,7,8,9,10]
 },
 methods:{
  push:function(){
   this.list.push(11);
   this.nextTick(function(){
    alert('数据已经更新')
   });
   this.$nextTick(function(){
    alert('v-for渲染已经完成')
   })
  }
 }
})

以上这篇vue2.0$nextTick监听数据渲染完成之后的回调函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中after()方法用法实例
Dec 25 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
微前端qiankun改造日渐庞大的项目教程
Jun 21 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 #Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 #Javascript
详解Eslint 配置及规则说明
Sep 10 #Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 #Javascript
vue弹窗组件的实现示例代码
Sep 10 #Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 #Javascript
vue插件实现v-model功能
Sep 10 #Javascript
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP中cookies使用指南
2007/03/16 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
详解JS面向对象编程
2016/01/24 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python logging类库使用例子
2014/11/22 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
会计主管岗位职责范文
2013/11/08 职场文书
车间操作工岗位职责
2013/12/19 职场文书
好军嫂事迹材料
2014/01/15 职场文书
演讲主持词
2014/03/18 职场文书
个人批评与自我批评
2014/10/15 职场文书
2014司机年终工作总结
2014/12/05 职场文书