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获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
连接Python程序与MySQL的教程
2015/04/29 Python
简单介绍Python中的round()方法
2015/05/15 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python实现动态创建类的方法分析
2019/06/25 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
分公司任命书
2014/06/06 职场文书
司法助理专业自荐书
2014/06/13 职场文书
员工工作自我评价
2014/09/26 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书