vue $nextTick()

// vue里面 data改变更新DOM是异步的 会先执行代码 再更新data里面的

//在哪里访问到更新后的DOM?

// this.$nextTick()里的函数体

//updated生命周期钩子函数

应用场景:

点击按钮 按钮消失。输入框出现并且聚焦

输入框聚焦:获取输入框 并调用focus方法    输入框还没有挂载到真实Dom上 需要用$nextTick

在数据更新结束之后调用此方法

<template>
  <div>
    <HelloWorld> </HelloWorld>
    <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow" />
    <button v-else @click="btn">点击按钮消失,输入框出现并聚焦</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    async btn() {
      this.isShow = true;
      // this.$refs.myInp.focus(

猜你喜欢

转载自blog.csdn.net/weixin_58414196/article/details/130785331