input获取焦点vue_Vue点击显示文本框并获取焦点

Vue中除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。//注册一个全局自定义指令v-focus

Vue.directive('focus', {

//当被绑定的元素插入到DOM中时……

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

如果想注册局部指令，组件中也接受一个directives的选项：directives: {

focus: {

//指令的定义

inserted: function (el){

el.focus()

}

}

}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

Vue中点击显示文本框并获取焦点

钩子函数inserted是指被绑定元素插入父节点时调用。注意这里的用词是插入到DOM中时，点击后显示文本框并获取焦点要用到v-if条件渲染。

new Vue({

el: '#app',

data: {

toggle: false

},

directives: {

focus: {

// 当绑定元素插入到 DOM 中。

inserted: function (el) {

// 聚焦元素

el.focus()

}

}

}

})

注意：autofocus在移动版Safari上不工作