zoukankan      html  css  js  c++  java
  • 在Vue中输入框自动获取焦点的三种方式

    原生JS操作DOM
    使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)
    1
    //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()
    }
    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.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: '',
    },

  • 相关阅读:
    守护进程(Daemon)
    Socket select的用法
    被误解的C++——磨刀不误砍柴工
    C++ 虚函数表解析
    进程间通信IPC
    pthread_join函数及linux线程
    详细讲解C++ 类的继承
    Trilogy公司的笔试题
    linux下fork的使用
    Ruby 编程规范
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/10916362.html
Copyright © 2011-2022 走看看