this.$nextTick()使用方法

前端 Vue

创建时间:2023-07-23 18:52

阅读:

介绍
示例代码

介绍

this.$nextTick() 是 Vue.js 中的一个方法，它用于在下一次 DOM 更新循环结束之后执行回调函数。
在Vue.js 中，当数据发生变化时，Vue.js 会异步地更新 DOM。这意味着，当您修改了数据并且想要在更新后立即操作 DOM 时，您不能保证 DOM 已经更新完成。
这就是 $nextTick()方法的作用，它可以让您在 DOM 更新完成后执行回调函数，以确保您操作的是最新的 DOM。

示例代码

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, Vue!'
      this.$nextTick(() => {
        // DOM 更新完成后执行
        console.log('DOM 已更新')
      })
    }
  }
}
</script>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。