点击按钮让input获取焦点
时间: 2023-08-18 10:11:31 浏览: 147
input的focus方法使用
你可以使用`v-if`来动态显示和隐藏input元素,然后在点击按钮时切换显示状态,从而实现点击按钮让input获取焦点的效果。
以下是示例代码:
```vue
<template>
<div>
<button @click="toggleInput">点击获取焦点</button>
<input v-if="showInput" ref="myInput" type="text">
</div>
</template>
<script>
export default {
data() {
return {
showInput: false
};
},
methods: {
toggleInput() {
this.showInput = !this.showInput;
if (this.showInput) {
this.$nextTick(() => {
this.$refs.myInput.focus();
});
}
}
}
}
</script>
```
在上面的代码中,我们使用`v-if`指令来根据`showInput`的值来动态显示或隐藏input元素。在点击按钮时,通过切换`showInput`的值来控制input的显示和隐藏,并在显示input后使用`this.$nextTick()`来确保DOM更新完成后调用`focus()`方法使input获取焦点。
这样,当点击按钮时,input元素将会显示并获取焦点。
阅读全文