1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > input获取焦点vue_在Vue中输入框自动获取焦点的三种方式

input获取焦点vue_在Vue中输入框自动获取焦点的三种方式

时间:2022-07-03 09:10:12

相关推荐

input获取焦点vue_在Vue中输入框自动获取焦点的三种方式

原生JS操作DOM

使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)

1

//html部分

编号:

//vue对象

var vm = new Vue({

el: '#app',

data: {

newId: '',

},

// 注意:mounted钩子函数的名字不能随便取,而且它不能写在methods属性。

mounted () {

document.getElementById('inputId').focus()

}

ref方式实现

//html部分

编号:

//vue对象

var vm = new Vue({

el: '#app',

data: {

newId: '',

},

mounted () {

this.$refs.id.focus();

}

使用自定义指令

1.Vue.directive('自定义指令的名字(可以随便取,但是全部小写)',{inserted:function(el,binding){}})

2. inserted钩子函数,它表示自定义指令插入到标签中的时候就执行

3. inserted钩子函数有两个参数(el,binding) el表示使用自定义指令的元素,binding表示自定义指令的信息

//html部分

编号:

//自定义指令

Vue.directive('myfocus', {

inserted: function(el, binding) {

//console.log(el)

el.focus()

}

})

//vue对象

var vm = new Vue({

el: '#app',

data: {

newId: '',

},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。