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.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript实现好看的跟随彩色气泡效果
Feb 06 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 运行效率总结(提示程序速度)
2009/11/26 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php 地区分类排序算法
2013/07/01 PHP
php查看网页源代码的方法
2015/03/13 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
数据库专业英语
2012/11/30 面试题
年度评优评先方案
2014/06/03 职场文书
测控技术自荐信
2014/06/05 职场文书
电子商务专业求职信
2014/07/10 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
JS实现简单的九宫格抽奖
2022/06/28 Javascript