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

 更新时间:2018年09月11日 08:52:51   作者:fongdaBoy  
今天小编就为大家分享一篇vue2.0$nextTick监听数据渲染完成之后的回调函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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监听数据渲染完成之后的回调函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 在antd4.0中Form使用initialValue操作

    在antd4.0中Form使用initialValue操作

    这篇文章主要介绍了在antd4.0中Form使用initialValue操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue使用动态组件手写Router View实现示例

    vue使用动态组件手写Router View实现示例

    这篇文章主要为大家介绍了vue使用动态组件手写RouterView实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Webpack打包图片-js-vue 案例解析

    Webpack打包图片-js-vue 案例解析

    在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库,本文给大家介绍Webpack打包图片-js-vue的相关知识,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • vue和react等项目中更简单的实现展开收起更多等效果示例

    vue和react等项目中更简单的实现展开收起更多等效果示例

    这篇文章主要介绍了vue和react等项目中更简单的实现展开收起更多等效果示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • uniapp使用webview内嵌H5的注意事项详解

    uniapp使用webview内嵌H5的注意事项详解

    在移动应用开发中,uniApp框架提供了一种跨平台的解决方案,允许开发者使用一套代码来构建iOS、Android等多平台的应用,这篇文章主要给大家介绍了关于uniapp使用webview内嵌H5的注意事项,需要的朋友可以参考下
    2024-07-07
  • vue实现echarts饼图/柱状图点击事件实例

    vue实现echarts饼图/柱状图点击事件实例

    echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
    2023-06-06
  • Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下
    2017-12-12
  • vue实现移动端触屏拖拽功能

    vue实现移动端触屏拖拽功能

    这篇文章主要为大家详细介绍了vue实现移动端触屏拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 使用Vant完成Dialog弹框案例

    使用Vant完成Dialog弹框案例

    这篇文章主要介绍了使用Vant完成Dialog弹框案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue-cli3项目生产和测试环境分包后文件名和数量不一致解决

    vue-cli3项目生产和测试环境分包后文件名和数量不一致解决

    这篇文章主要为大家介绍了vue-cli3项目生产和测试环境分包后文件名和数量不一致解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论