澳门金沙网上娱乐官网

 更新时间:2019年09月11日 14:52:04   作者:佳琪欧尼   我要评论

在本篇文章里小编给大家整理了关于vue中nextTick用法实例以及相关代码内容,需要的朋友们可以参考下。

什么是Vue.nextTick()

官方文档解释如下:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM,获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,比如Swiper扩展包的

var swiper = new Swiper('.swiper-container', {
   pagination: '.swiper-pagination',
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
   paginationClickable: true,
   spaceBetween: 30,
   centeredSlides: true,
   autoplay: 2500,
   autoplayDisableOnInteraction: false
  });
<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渲染已经完成')
     })
   }
}})
  • Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
  • Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

以上就是本次介绍的全部知识点内容,感谢大家对脚本之家的支持。

相关文章

  • Vue结合SignalR实现前后端实时消息同步

    Vue结合SignalR实现前后端实时消息同步

    这篇文章主要为大家详细介绍了Vue结合SignalR实现前后端实时消息同步,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 解决vue单页面修改样式无法覆盖问题

    解决vue单页面修改样式无法覆盖问题

    这篇文章主要介绍了vue单页面修改样式无法覆盖问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue页面骨架屏注入方法

    Vue页面骨架屏注入方法

    这篇文章主要介绍了Vue页面骨架屏注入的操作,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 浅谈Vue下使用百度地图的简易方法

    浅谈Vue下使用百度地图的简易方法

    本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue select组件的使用与禁用实现代码

    vue select组件的使用与禁用实现代码

    这篇文章主要介绍了vue--select组件的使用与禁用的实现代码,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
    2018-04-04
  • Vue动态面包屑功能的实现方法

    Vue动态面包屑功能的实现方法

    面包屑功能是我们在项目中经常遇到的功能,今天小编使用Element-UI 进行实现在vue项目中实现面包屑功能,具体实现方式大家跟随小编一起学习吧
    2019-07-07
  • 使用Nuxt.js改造已有项目的方法

    使用Nuxt.js改造已有项目的方法

    这篇文章主要介绍了使用Nuxt.js改造已有项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 深入理解Vue 组件之间传值

    深入理解Vue 组件之间传值

    这篇文章较详细的给大家介绍了vue组件之间传值的方法,在 Vue 中,可以使用props向子组件传递数据。具体传递方法大家跟随脚本之家小编一起看看吧
    2018-08-08
  • 详解vue 数组和对象渲染问题

    详解vue 数组和对象渲染问题

    这篇文章主要介绍了详解vue 数组和对象渲染问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue2.0使用v-for循环制作多级嵌套菜单栏

    vue2.0使用v-for循环制作多级嵌套菜单栏

    这篇文章主要介绍了vue2.0制作多级嵌套菜单栏,主要使用v-for循环生成一个多级嵌套菜单栏,这个方法应用非常广泛,需要的朋友可以参考下
    2018-06-06

最新评论