Vue异步更新和$nextTick函数

Vue是异步dom对象更新的

需求：编辑标题，编辑框自动聚焦

1：点击编辑，显示编辑框

2：让编辑框，立刻获取焦点

可以使用$nextTick函数加载完dom之后触发想要操作dom的方法

<template>
    <div>
        <div v-if="flag">
          <input type="text" v-model="username" ref="inp">
          <button>确认</button>
        </div>
        <div v-else>
          <span>{{title}}</span>
          <button @click="edit">编辑</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
          flag:false,
          username:'',
          title:'大标题'
        };
    },

    mounted() {

    },

    methods: {
      edit(){
        this.flag = true
        //获取到输入框焦点
        this.$nextTick(()=>{
          this.$refs.inp.focus()
        })
        // setTimeout(()=>{
        //   this.$refs.inp.focus()
        // //  等待个一秒中
        // },1000)
      }
    },
};
</script>

<style  scoped>

</style>