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

  1. 原生JS操作DOM
使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)
//html部分
 编号:<input type="text" v-model='newId' id='inputId'>
//vue对象
var vm = new Vue({
    el: '#app',
    data: {
      newId: '',    
    },
    // 注意:mounted钩子函数的名字不能随便取,而且它不能写在methods属性。
    mounted () {     
       document.getElementById('inputId').focus()
    }
  1. ref方式实现
//html部分
 编号:<input type="text" v-model='newId' ref='id'>
//vue对象
var vm = new Vue({
    el: '#app',
    data: {
      newId: '',    
    },
    mounted () {     
       this.$refs.id.focus();
    }
  1. 使用自定义指令
1.Vue.directive('自定义指令的名字(可以随便取,但是全部小写)',{inserted:function(el,binding){}})
2. inserted钩子函数,它表示自定义指令插入到标签中的时候就执行
3. inserted钩子函数有两个参数(el,binding) el表示使用自定义指令的元素,binding表示自定义指令的信息
//html部分
 编号:<input type="text" v-model='newId' v-myfocus>
//自定义指令
        Vue.directive('myfocus', {
            inserted: function(el, binding) {
                //console.log(el)
                el.focus()
            }
        })
//vue对象
var vm = new Vue({
    el: '#app',
    data: {
      newId: '',    
    },
  • 9
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值