VUE 处理文本框获焦点高亮

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