1）輸入框給一個v-focus屬性：

<input ref="searchInput" v-focus>

2）自定義獲得焦點指令：

directives: {focus: {// 指令的定義inserted: function(el) {el.focus();}}},

3）點擊事件觸發(fā)聚焦

this.$nextTick( () => {this.$refs.searchInput.focus();}) 完整代碼： <input@keyup="searchGame"ref="searchInput"v-focusclass="game__search-input"type="text"placeholder="搜索"v-model="searchGameName"><div @click="handleKey" class="game__pop-key-search"></div><script> export default {name: 'SelectGame',components: {},data() {return{searchGameName: '', // 搜索名稱}},directives: {focus: {// 指令的定義inserted: function(el) {el.focus();}}},methods: {/*** 點擊開始搜索游戲*/searchGame () {3）點擊事件觸發(fā)聚焦this.$nextTick( () => {this.$refs.searchInput.focus();})let gameList = this.games;if (this.searchGameName !== '') {gameList = this.games.filter((item) => {return item.app_name.indexOf(this.searchGameName) !== -1})}this.picGameData(gameList);},/*** 點擊字符搜索游戲*/handleKey() {this.$nextTick( () => {this.$refs.searchInput.focus();})}} }

vue自定義指令知識：https://cn.vuejs.org/v2/guide/custom-directive.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue 输入框获取焦点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。