一、需求
二、方案
this.$nextTick(function () {
//DOM 更新了
this.$refs.test1.focus();
})
this.$nextTick(function () {
//DOM 更新了
document.querySelector("#test2").focus();
})
- 重点：$nextTick，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数
三、看完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue中如何让文本框获取焦点（两种方式）</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
span {
padding: 0 10px;
}
</style>
</head>
<body>
<div id="app">
<p>利用ref设置焦点：<input type="text" id="test1" ref="test1"/></p>
<p>利用 js 设置焦点：<input type="text" id="test2"/></p>
<button @click="testBtn1">利用ref设置焦点</button>
<button @click="testBtn2">利用js 设置焦点</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isFocus: false,
that: this
},
methods: {
testBtn1: function () {
this.$nextTick(function () {
//DOM 更新了
this.$refs.test1.focus();
})
},
testBtn2: function () {
this.$nextTick(function () {
//DOM 更新了
document.querySelector("#test2").focus();
})
},
}
})
</script>
</html>