文档章节

VUE 处理文本框获焦点高亮

o
 osc_y8yehimr
发布于 2019/03/20 15:58
字数 274
阅读 15
收藏 0

精选30+云产品,助力企业轻松上云!>>>

先贴例子代码  这里又三个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 控制上下换行的时候  就可以高亮了

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

自从尝了 Rust,Java 突然不香了

Rust 是软件行业中相对而言比较新的一门编程语言,如果从语法上来比较,该语言与 C++ 其实非常类似,但从另一方面而言,Rust 能更高效地提供许多功能来保证性能和安全。而且,Rust 还能在无需...

osc_k3vwonkw
21分钟前
10
0
Java 高级 面试题 及 参考答案

一、面试题基础总结 1、 JVM结构原理、GC工作机制详解 答:具体参照:JVM结构、GC工作机制详解 ,说到GC,记住两点:1、GC是负责回收所有无任何引用对象的内存空间。 注意:垃圾回收回收的是无...

FH-Admin
21分钟前
14
0
机器学习中的AUC-ROC曲线

作者|ANIRUDDHA BHANDARI 编译|VK 来源|Analytics Vidhya AUC-ROC曲线 你已经建立了你的机器学习模型-那么接下来呢?你需要对它进行评估,并验证它有多好(或有多坏),这样你就可以决定是否...

osc_bg8v9gvf
23分钟前
8
0
音视频(消息)应用场景 :连麦交友例子

实现一个小例子: 效果类似唱吧APP里的 连麦交友功能,音视频,IM 及音视频 SDK参考融云服务商。 没有印象的可以搜索 ’连麦’ 关键字在 应用商店下载一款 连麦的软件 体验下 业务方面的需求...

T型人才追梦者
24分钟前
11
0
逛淘宝天猫想到SSO单点登录

我的原文地址:https://mp.weixin.qq.com/s/77xukPDlgkKnYpwu4LrqaA

osc_yy65eb2q
24分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部