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 控制上下換行的時候  就可以高亮了