vue中input输入第一个字符时，光标会消失，需要再次点击才能输入

在这里我犯了一个小错误，v-if语法比较倾向于一次性操作，当input获取焦点时，v-if判断为true，立即刷新数据，进行渲染，并且立即重置input

的初始状态，导致光标消失，需要再次点击才能继续输入

v-show适合对数据的多次操作，所以把v-if换成v-show，一切问题迎刃而解

vue中input输入第一个字符时，光标会消失，需要再次点击才能输入的更多相关文章

  1. 关于eclipse码代码时光标自动消失要重新点击输入框的问题

    前几天码代码时在两个电脑都出现了同样的问题,就是在输入的时候,输入法突然从程序框切换到某不可名状的位置,要重新点击输入框才能解决.(后发现不但是eclipse,任何带有输入框的都会出现此问题) 经排查 ...

  2. vue中使用iview表单验证时this指针问题

    需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

  3. vue中，对象数组多层嵌套时，更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  4. VUE中实现iview的图标效果时遇到的一个问题

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...

  5. 微信6.7.4 ios12 软键盘收回时页面不回弹，导致光标位置错乱，再次点击输入框区域时无法focus

    https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 https://blog.c ...

  6. vue中input输入框的模糊查询实现

    最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...

  7. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  8. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  9. vue中setTimeout切换浏览器页签时怎么清除解决方案

    大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...

随机推荐

  1. vue使用基础

    1. 首先下载node.js安装 下载地址:https://nodejs.org/en/download/ 2. 安装vue脚手架 在cmd命令里面输入 npm install -g @vue/cli ...

  2. JSOI2019 Round2

    JSOI的题质量很高-- 精准预测(2-SAT.拓扑排序.bitset) 不难发现两个条件都可以用经典的2-SAT连边方式连边,考虑如何加入时间的限制.对于第\(x\)个人在\(t\)时刻的状态是生/ ...

  3. SpringBoot 常用配置 静态资源访问配置/内置tomcat虚拟文件映射路径

    Springboot 再模板引擎中引入Js等文件,出现服务器拒绝访问的错误,需要配置过滤器 静态资源访问配置 @Configuration @EnableWebMvc public class Sta ...

  4. .net core使用ocelot---第七篇 服务发现

    简介 .net core使用ocelot---第一篇 简单使用   .net core使用ocelot---第二篇 身份验证使用  .net core使用ocelot---第三篇 日志记录  .net ...

  5. 每周分享五个 PyCharm 使用技巧（四）

    文章首发于 微信公众号:Python编程时光 PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. 一个每天都在使用的工具,如果能掌 ...

  6. RAS非对称加密

    加解密密钥不一致,一般私钥不公开,使用公钥加密,私钥解密,使用私钥加密,公钥可以解密. java代码 import javax.crypto.Cipher; import java.security. ...

  7. 压测工具wrk的编译安装与基础使用

    Linux上编译安装: [root@centos ~]# cd /usr/local/src [root@centos ~]# yum install git -y [root@centos ~]# ...

  8. CSS关于选择器和继承的一些小问题：

    选择器的分组 对选择器进行分组,这样在同一组的选择器就可以分享相同的声明.使用逗号将需要分组的选择器分开 h1,h2,h3,h4,h5{ color:green; font-family:" ...

  9. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  10. CSS是什么

    css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS不 ...