<input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路">

1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作

2.Vue官网给出的解决办法

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//组件注册,与created、mounted同级

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
//使用方式

<input v-focus>
 inserted(钩子函数):被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

3.适合Vue

mounted () {
this.$nextTick(() => {
this.$refs.input.focus()
})
}
 但是我发现,这些方法都没解决第一次进入页面,input获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。

Vue中自动获取input焦点的更多相关文章

  1. vue element-ui 自动获取光标

    <el-input ref="customerInput"></el-input> this.$refs.mark.$el.querySelector('i ...

  2. vue中如何获取后台数据

    原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...

  3. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  4. vue中多个input绑定enter按键事件

    默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...

  5. vue中js获取组件实例

    获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...

  6. Vue中对获取的数据进行重新排序

    var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组,来接收数据.listJust: [] addDat ...

  7. vue中 js获取图片尺寸 设置不同样式

    1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式

  8. 在vue中获取微信支付code及code被占用问题的解决?

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...

  9. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

随机推荐

  1. 简单java web制作思路

    经过俩天的摸索,和学姐的帮助下终于做出来一个简单地网页版的学生信息添加的系统.接下来说一下答题的思路: 首先我个人习惯先做网页界面,创建3个jsp文件分别是添加界面,成功界面,失败界面.这件看起来更加 ...

  2. Git的学习和使用

    1.1. Git 了解git的仓库概念 熟悉何为版本控制,了解分布式版本控制(git)和集中式版本控制(svn) 能够熟练使用git的基本指令完成仓库的初始化/添加/提交/日志/回退/分支等操作 gi ...

  3. Android中的Service基础

    Service主要用于后台程序和跨进程访问,可以在不显示界面的前提下完成任务,不影响用户的其他操作. 这里我展示一些基本的用法 新建一个Service类 package com.example.ser ...

  4. 2019kali中文乱码

    1.安装KALI2019.4版本后会出现乱码问题 2.更新国内源,使用vim编辑器修改:vim /etc/apt/sources.list添加 #清华大学 [更新源]    deb https://m ...

  5. 数据结构与算法之非比较排序【Java】

    比较排序与非比较排序的对比 常见的快速排序.归并排序.堆排序.冒泡排序等属于比较排序.在排序的最终结果里,元素之间的次序依赖于它们之间的比较.每个数都必须和其他数进行比较,才能确定自己的位置.在冒泡排 ...

  6. .NetCore学习笔记:三、基于AspectCore的AOP事务管理

    AOP(面向切面编程),通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是函数式编程的一种衍生范型.利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑 ...

  7. jQuery---自定义动画 animate();

    自定义动画 animate(); 第一个参数:{对象},里面可以传需要动画的样式 第二个参数:speed 动画的执行时间 第三个参数:easing 动画的执行效果 第四个参数:callback 回调函 ...

  8. java exec python program

    I find three methods, the first is using jython, the module of jython can transform the type of data ...

  9. linux--python3安装以及虚拟环境配置

    linux下python3的编译安装以及项目运行 普通版安装编译python3并运行项目 最好指定目录进行操作 1.解决系统的基础开发工具,防止python3编译过程出错 yum install gc ...

  10. Windows里面的虚拟机,部署的项目在同一网段也可以访问到

    一直想对自己Linux里面部署的项目进行再同一网段进行共享让其他和我同网段的人都看到 今天对于这个问题我终于解决了 首先编辑自己的虚拟机 进行虚拟机网络编辑 选择VMnet8 然后进行下面的NET设置 ...