$nextTick的使用

核心：页面重新渲染后再执行其中的内容。

<template>
  <div id="app">
 <div>
    <input type="text" ref="test1"> <button @click='myFocus1'>获取焦点</button>
 </div>
  <div>
    <input type="text" ref="test2" v-show="flag"><button @click="showAndFocus">显示并获取焦点</button>
  </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      flag:false
    }
  },
  methods:{
    myFocus1(){
      this.$refs.test1.focus();
    },
    showAndFocus(){
      this.flag = true;
    //程序运行到这，此时页面input仍是隐藏的，故下面这句获取不到元素，焦点无法获取
    //this.$refs.test2.focus();

    // 换一种方式
    // nextTick即是在DOM元素渲染出来之后再进行操作
    this.$nextTick(()=>{
      this.$refs.test2.focus();
    })
    }
  
  }
}
</script>

<style>

</style>