像这种情况就可以使用 nextTick 解决 [推荐]
<template>
<div>
<h2>欢迎您!{
{ name }}</h2>
<button @click="edit">编辑</button>
<input ref="content" v-show="status" type="text" v-model="name">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
name: "张三",
status: false
}
},
methods: {
edit() {
this.status = !this.status;
// 等待页面渲染完毕后执行
this.$nextTick(() => {
// 显示输入框后自动获取焦点
this.$refs.content.focus();
// 获取输入框显示状态
console.log(this.$refs.content.style.display);
})
}
}
}
</script>
注:当事件触发后,会分为两次执行 先执行 nextTick 外边的代码 然后等 DOM 更新完毕后,再执行 nextTick 里边的代码.
第二种: 使用定时器解决【不推荐】
当然 使用定时器延迟执行也能解决这个问题。
<template>
<div>
<h2>欢迎您!{
{ name }}</h2>
<button @click="edit">编辑</button>
<input ref="content" v-show="status" type="text" v-model="name">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
name: "张三",
status: false
}
},
methods: {
edit() {
this.status = !this.status;
// 使用定时器延迟执行
setTimeout(() => {
// 显示输入框后自动获取焦点
this.$refs.content.focus();
// 获取输入框显示状态
console.log(this.$refs.content.style.display);
})
}
}
}
</script>
注:不需要给定时器设置时间,这样可以等 DOM 更新完毕后立即执行。但是更推荐使用 nextTick 解决。
原创作者:吴小糖
创作时间:2023.5.7