使用$nextTick()

$nextTick的作用是，在下一次DOM更新结束时执行指定的回调。
$nextTick的使用场景是，当数据改变时，要基于更新后的DOM执行某些操作，可以在$nextTick指定的回调中执行。
关于nextTick，更多可以访问Vue官网。

看个具体的例子。

• main.js

import Vue from 'vue';  
import App from './App.vue';Vue.config.productionTip = false;new Vue({
    el:"#app",render: h => h(App)
})

• App.vue

<template><div class="app"><span class="title" v-show="!obj.isEdit">{
   {obj.title}}</span><input class="title" v-show="obj.isEdit" type="text" :value="obj.title" ref="inputEle" @blur="handleBlur($event)"><button class="btn" @click="handleEdit" v-show="!obj.isEdit">编辑</button></div>
</template><script> export default {
      data(){
      return {
      obj:{
      title:"吃饭",isEdit:false}}},methods:{
      handleEdit(){
      this.obj.isEdit = true;// this.$refs.inputEle.focus();this.$nextTick(function(){
      this.$refs.inputEle.focus();})},handleBlur(e){
      this.obj.isEdit = false;if(!e.target.value.trim()) return alert("输入不能为空！");this.obj.title = e.target.value;}} } </script><style> .app{
      display: inline-block;margin: 20px; } .title{
      display: inline-block;width:180px;box-sizing: border-box; }.btn{
      padding: 3px 15px;color: #fff;background: rgb(228, 187, 83);border: 1px solid goldenrod;border-radius: 5px;float: right;margin-left: 5px;} .btn:hover{
      cursor: pointer;background: goldenrod; } .btn:active{
      background: darkgoldenrod; } </style>

一点击编辑按钮，文本变成输入框，且输入框自动获得焦点。