比如

点击入库，el-dialog弹出来，然后自动聚焦第一个输入框，当输入框有值的时候，自动跳转下一个输入框

这个需求

直接上菜：

this.$refs.lbj.focus()其实直接这么写也可以，但是关闭弹出，再次打开弹窗的时候，他不会聚焦，至于为啥，我也不懂，只有看大神解释了，
这里的lbj你要ref 输入框那里

然后去监听，这个对象的单一属性，开始消费码

lbj01，就是结束消费码的ref

搞定

然后这里解释一下为啥要用

this.$nextTick( () =>{
  this.$refs.lbj01.focus()
} )

最后去网上查找资料，发现是更新dom先后顺序的问题，在vue中，并不是每次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。

通常情况下，我们不需要关心这个问题，而如果想在DOM状态更新后做点什么，则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

说白了就是想要在DOM状态更新后做什么，比如聚焦等，就要用到

nextTick，你里面才是你要聚焦的代码
												


											
vue中输入框聚焦，自动跳转下一个输入框的更多相关文章
	

    
								
  1. 如何设置使chrome新标签页中打开链接自动跳转到新标签页?
		
    在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...
    
		
    2. 
						
  2. Vue中如何在组件内部实现一个双向数据绑定？
		
    假设有一个输入框组件,用户输入时,同步父组件页面中的数据. 具体思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下: import Vue ...
    
		
    3. 
						
  3. vue中的路由的跳转的参数
		
    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
    
		
    4. 
						
  4. vue中的锚链接跳转问题
		
    在vue中的锚链接和普通的html不同,关于vue中的锚链接可以参考vue 中的  scrollBehavior 滚动行为. 在router.js中 //创建 router 实例 const rout ...
    
		
    5. 
						
  5. vue中组件的data为什么是一个函数
		
    1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...
    
		
    6. 
						
  6. ip输入框键入.或者合法数字自动选择下一个输入框效果
		
    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
    
		
    7. 
						
  7. vue中时间控件绑定多个输入框
		
    首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...
    
		
    8. 
						
  8. vue中两种路由跳转拼接参数
		
    this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...
    
		
    9. 
						
  9. vue中，基于echarts 地图实现一个人才回流的大数据展示效果
		
    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. echarts pie 图表当名称太长时
			
    当饼图的名称太长时,只显示几个字符,其余的... let use; use.setOption({ tooltip: { trigger: 'item', formatter: "{a} & ...
    
			
    2. 
						
  2. Direct Visual-Inertial Odometry with Stereo Cameras
			
    这对于直接方法是特别有益的:众所周知直接图像对准是非凸的,并且只有在足够准确的初始估计可用时才能预期收敛.虽然在实践中像粗到精跟踪这样的技术会增加收敛半径,但是紧密的惯性积分可以更有效地解决这个问题, ...
    
			
    3. 
						
  3. /usr/bin/ld: 找不到 -lmsc----解决方案
			
    系统的默认搜索依赖库路径为,/usr/local/lib 在camkelists.txt文件中对可执行文件链接libmsc.so add_executable(iat_publish src/iat_ ...
    
			
    4. 
						
  4. Catch That Cow POJ - 3278  bfs map超时，短路判断顺序。
			
    题意:可以把n边为n+1,n-1,n*2问从n到k的最少变化次数. 坑:标题写了.有点不会写bfs了... ac代码 #define _CRT_SECURE_NO_WARNINGS #include& ...
    
			
    5. 
						
  5. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr
			
    安装 cross-env yarn add -D cross-env 安装 html-webpack-plugin yarn add -D html-webpack-plugin 安装 webpack ...
    
			
    6. 
						
  6. 洛谷P3224 永无乡 [HNOI2012] 线段树/splay/treap
			
    正解:线段树合并 解题报告: 传送门! 这题也是有很多解法,eg:splay,treap,... 然而我都不会我会学的QAQ! 反正今天就只讲下线段树合并怎么做QAQ 首先看到这样子的说第k重要的是什 ...
    
			
    7. 
						
  7. debian下配置nginx缓存
			
    root权限下 新建/usr/nginx/cache/webpages目录 在/etc/nginx/sites-available下找到自己所需配置的文件,打开文件后在开头加上proxy_cache_ ...
    
			
    8. 
						
  8. Servlet----------通过 HttpServlet 开发Servlet
			
    通过继承HttpServlet抽象类,功能更强大. 通过HttpServlet方法开发Servlet需要重写doGet和doPost方法.这是目前用的最多的一种方法. 如:   class MyHtt ...
    
			
    9. 
						
  9. wordpress去掉category怎么操作让url更简洁友好
			
    用wordpress建站是比较流行的,全球将近25%的站点是用wordpress搭建的.有很多的模板.插件可以选择,当然最好还是能自己优化.URL固定链接就是之中一个基础的技巧.有网友问如何去掉url ...
    
			
    10. 
						
  10. c# ThreadPool 判断子线程全部执行完毕的四种方法
			
    1.先来看看这个 多线程编程 多线程用于数据采集时,速度明显很快,下面是基本方法,把那个auto写成采集数据方法即可. using System; using System.Collections.G ...
    
			
    11.