官方解释:

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

自己总结:

`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

实例:

<template>
<div>
<div class="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
</div>
</template> <script>
export default {
data() {
return {
msg: "Hello Vue.",
msg1: "",
msg2: "",
msg3: ""
};
},
methods: {
changeMsg() {
this.msg = "Hello world.";
this.msg1 = this.$refs.msgDiv.innerHTML;
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML;
});
this.msg3 = this.$refs.msgDiv.innerHTML;
}
}
};
</script>

  

参考博客:

https://blog.csdn.net/sinat_17775997/article/details/71638144(理解 $nextTick 的作用)

Vue里的nextTick方法的更多相关文章

  1. 正确理解使用Vue里的nextTick方法

    最近,在项目中要使用Swiper做一个移动端轮播插件.需要先异步动态加载数据后,然后使用v-for渲染节点,再执行插件的滑动轮播行为.解决这个问题,我们通过在组件中使用vm.$nextTick来解决这 ...

  2. JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法

    1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2. ...

  3. vue中,写在methods里的B方法去调A方法的数据,访问不到?

    今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...

  4. vue.nextTick()方法的使用详解

    什么是Vue.nextTick()??   定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...

  5. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  6. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  7. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  8. 详解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  9. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

随机推荐

  1. C++函数重载详解

    我们在开瓶瓶罐罐的时候,经常会遭遇因各种瓶口规格不同而找不到合适的工具的尴尬.所以有时候就为了开个瓶,家里要备多种规格的开瓶器.同样是开个瓶子嘛,何必这么麻烦?于是有人发明了多功能开瓶器,不管啤酒瓶汽 ...

  2. 流媒体直播服务器:Bull-Live-Server

    Bull Live Server 简称 BLS ,旨在使用C++语言提供强大功能和高性能的流媒体直播服务器. 为何要写 BLS ? 1.simple rtmp server https://githu ...

  3. Uva10366

    模拟乱搞 要说算法的话...乱搞算法? #include<iostream> #include<cstring> #include<algorithm> #incl ...

  4. DP小合集

    1.Uva1625颜色的长度 dp[i][j]表示前一个串选到第i个 后一个串选到第j个 的最小价值 记一下还有多少个没有结束即dp2 记一下每个数开始和结束的位置 #include<cstdi ...

  5. Poj 1742 Coins(多重背包)

    一.Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dolla ...

  6. loadrunner的四个主要部件

    1.VUser Generator :性能脚本开发 2.Controller :提供多线程并发操作 3.Analysis :结果分析 4.Load Generator :负载生成器 ***负载生成器完 ...

  7. JavaScript-Tool-富文本:UEditor

    ylbtech-JavaScript-Tool-富文本:UEditor UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协 ...

  8. wpf 样式继承

    当定义的wpf多个样式,其样式内容(属性.触发器等)有较多的重复时,可以考虑将其抽象成父样式,来提升样式代码的可维护性以及减少代码冗余. wpf 进行样式继承时,需要使用style的BasedOn属性 ...

  9. SEO优化-伪静态-URLRewrite 详解

    下面是文章是我在网上看到的,觉得写的还不错,我拿过来,修改了一些作者没有说到的地方....... 1. 在apache中配置 2. 用URLRewrite(详细:重点是UrlRewrite+Strut ...

  10. varnish安装和配置

    实验环境:CentOS7 Varnish是高性能开源的反向代理服务器和HTTP缓存服务器. #varnish服务器:172.16.252.142 [root@varnish localhost]#yu ...