Vue中nextTick()的使用

nextTick

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

使用场景:


1.

如果在beforeCreated,created钩子函数中操作dom节点的话,就要使用this.$nextTick(),否则会报错。

beforeCreate(){

this.$nextTick(()=>{

this.$refs.p.color="blue";

})

}

2.v-if后操作节点

<button type="button" @click="change">切换</button>

<div ref="dom" v-if="show">

我在这

</div>

data:{

show:false

},

methods:{

change(){

this.show=!this.show

if(this.show){

this.$nextTick(()=>{    //不写会报Cannot read property 'style' of undefined

this.$refs.dom.style.color="red";  

})

}

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 是当接收数据后,需要重新调用刷新该界面数据,在官网在的vue的api中有一个nextTick(),是将回调函数延迟...
    zhaur阅读 770评论 0 1
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,897评论 6 16
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 747评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,112评论 0 2
  • Vue.nextTick是Vue官方给我们提供的一个API(方法),作用是在下次DOM更新循环结束之后执行延迟回调...
    有梦想的咸鱼前端阅读 680评论 0 5