先贴例子代码  这里又三个div对应的三个input输入框

 <!-- 登录的表单 -->
<div class="input_group" :class="{active:act_index===1}">
<label for="cm_code">公司编号:</label>
<input @focus="act_index=1" type="number" id="cm_code" v-model="cm_code">
</div> <div class="input_group" :class="{active:act_index===2}">
<label for="PNO">员工编号:</label>
<input @focus="act_index=2" type="number" id="PNO" v-model="cm_code">
</div> <div class="input_group" :class="{active:act_index===3}">
<label for="Passwd">用户密码:</label>
<input @focus="act_index=3" type="number" id="Passwd" v-model="cm_code">
</div>

一、给需要高亮样式的input绑定样式 :class = "{active:act_index===1}" 这里的act_index 在data中需要设置,默认为1

第一个输入框的act_index为1的时候高亮 第二个act_index为2的时候高亮 以此类推 所以只需要控制 act_index 的值就行

export default {
data () {
return {
act_index:1,
cm_code:""
};
}
}

2、可以选择点击事件 @click 去控制点击时候的 高亮,但是无法用电脑使用Tab 控制上下换行高亮

  所以这里推荐使用  @focus 可以获取焦点  这样在电脑上使用Tab 控制上下换行的时候  就可以高亮了

VUE 处理文本框获焦点高亮的更多相关文章

  1. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

  2. jQuery 使得文本框获得焦点

      今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...

  3. javascript当文本框获得焦点设置边框

    javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...

  4. jQuery 文本框得失焦点应用

    一.文本框得失焦点一种是改变文本框的样式    得到焦点:               失去焦点: 二.文本框得失焦点另一种是改变文本框的值    得到焦点:     失去焦点:       三.jQ ...

  5. Easyui中 messager.alert 后某文本框获得焦点

    messager.alert 后某文本框获得焦点 $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, ...

  6. CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  7. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  8. jQuery之文本框得失焦点

    版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc h ...

  9. easyUI文本框获得焦点,失去焦点

    easyUI帮助文档对于文本框的操作没有提供直接获得焦点,或者失去焦点的方法,我们可以采用以下写法来实现. 获得焦点: $('input',$('#文本框Id').next('span')).focu ...

随机推荐

  1. python 列表 元祖

    # # 1,写代码,有如下列列表,按照要求实现每⼀一个功能li = ["alex", "WuSir", "ritian", "ba ...

  2. 如何征服面试官,拿到Offer [转]

    转自 https://my.oschina.net/cccyb/blog/3012768 又到了茶余饭后的时间,想想写点什么,掐指一算,噢呦,快到3月份了,职场的金三银四跳槽季又来了,不同的是今年比往 ...

  3. ASP.NET API Helper Page 创建并生成相关帮助文档

    创建API项目 修改原工程文件,该行为是为了避免和引入第三方API工程文件冲突 修改发布设置 引入需要生成文档的相关文件,将第三方API依赖的相关文件(XML文件非常重要,是注释显示的关键),复制到文 ...

  4. [SHOI2015]超能粒子炮·改

    嘟嘟嘟 先看了一遍lucas,还是只能拿50分(似乎已经满足了). 正解当然还是看某个大佬的啦. 我们要求的就是 \[f(n, k) = \sum _ {i = 0} ^ {k} C _ {n} ^ ...

  5. hash_hmac 签名

    <?php /** * =========================================================== * Model_Base * Descriptio ...

  6. freopen

    一定要记住哇 求求你了 记住吧 freopen("balabala.in","r",stdin); freopen("balabala.out&quo ...

  7. postman简介及基本用法

    从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...

  8. Nginx+IIS简单的部署

    随着互联网项目用户访问量不断上升,单点web服务器是无法满足大型高并发高负载的业务处理的,为了给web服务器做负载均衡方案,打算采用Nginx搭建负载均衡服务器,把用户请求分配到N个服务器来缓解服务器 ...

  9. element-ui中 table表格hover 修改背景色

    增加样式级别就行啦   .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !i ...

  10. 从一个例子入门Mysql储存过程

    例子 -- 秒杀执行存储过程 DELIMITER $$ -- 将分隔符; 转换为 $$ -- 定义存储过程 -- 参数: in 输入参数; out 输出参数 -- row_count():返回上一条修 ...