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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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连接Oracle for NT 远程数据库
2006/10/09 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
JavaScript函数模式详解
2014/11/07 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
python实现批量图片格式转换
2020/06/16 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python装饰器语法糖
2019/01/02 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
用python计算文件的MD5值
2020/12/23 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
实习教师自我鉴定
2013/12/09 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
美食节策划方案
2014/05/26 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
python单向链表实例详解
2022/05/25 Python