注释很详细，直接上代码

上一篇

新增内容
$nextTick的使用场景演示

源码

App.vue

<template><div id="app"><h3>{{name}}</h3><button @click="showfixed">修改</button><form action="post" v-show="isShow"><input type="text" ref="inputvalue"><div @click="onClick">提交</div></form></div>
</template>
<script>export default {name: "App",components: {},data() {return {isShow:false,name:'代码对我眨眼睛'};},methods: {showfixed(){this.isShow=true;//因为vue修改数据以后并不是立即刷新界面，//所以此时是找不到inputvalue的//所以需要nextTick在下一轮的渲染周期中执行该函数this.$nextTick(()=>{this.$refs.inputvalue.focus();})},onClick(){//如果去前后空格后不为空if(this.$refs.inputvalue.value.trim()!==''){this.name=this.$refs.inputvalue.value;this.isShow=false;}}}
};
</script>
<style lang="less">h3{display: inline-block;
}
form div{display: inline-block;border: gray 1px solid;margin-left: 10px;border-radius: 2px;cursor: pointer;
}
</style>

效果演示