关于数组中的某元素的修改

问题场景:

目的是想在输入框获得焦点时，底框颜色变蓝色。

data() {
    signForm: {
       mobile: "",
       password: "",
    },
    pwdAgain: "",
    isblurArr: [-1,-1,-1]
}

// html: 
<p>手机号</p >
      <div class="ipt" :style="{borderColor:isblurArr[0]==0?'#3399ff':'#bfbfbf'}">
        <input
          type="text"
          placeholder="请输入联系方式"
          v-model="signForm.mobile"
          @focus="isblurArr[0]=0"
          @blur="isblurArr[0]=-1;"
        />
      </div>
      <p>密码</p >
      <div class="userNames ipt" :style="{borderColor:isblurArr[1]==0?'#3399ff':'#bfbfbf'}">
        <input
          type="text"
          placeholder="登录密码"
          v-model="signForm.password"
          @focus="isblurArr[1]=0"
          @blur="isblurArr[1]=-1;"
        />
      </div>
     <p>确认密码</p >
      <div class="userNames ipt" :style="{borderColor:isblurArr[3]==0?'#3399ff':'#bfbfbf'}">
        <input
          type="text"
          placeholder="再次输入密码"
          v-model="pwdAgain"
          @focus="isblurArr[3]=0"
          @blur="isblurArr[3]=-1;"
        />
      </div>

上述代码 是想在输入框获得焦点时 响应的修改数组中对应元素的值 结果可想而知 没有生效
后来查了查 发现修改数组的某个元素不能直接isblurArr[1]=0;这样赋值修改而是得使用splice()方法进行修改 如下:

修改数组中某个元素的方法:

let arrList= [-1,-1,-1,-1,-1]
// 修改arrList数组中的2个元素为0:
arrList.splice(1,1,"0"); // 从索引为1开始,往后数1个,并将其替代为0

// 输出结果:
arrList: [-1,0,-1,-1,-1]

改成对象之后 就很香了:

data() {
isblurObj: {
        // 控制输入框底线颜色
        a: -1,
        b: -1,
        c: -1,
        d: -1,
        e: -1
      }
}


// html:
<p>手机号</p >
      <div class="ipt" :style="{borderColor:isblurObj.a==0?'#3399ff':'#bfbfbf'}">
        <input
          type="text"
          placeholder="请输入联系方式"
          v-model="signForm.mobile"
          @focus="isblurObj.a=0"
          @blur="isblurObj.a=-1;"
        />
      </div>
      <p>密码</p >
      <div class="userNames ipt" :style="{borderColor:isblurObj.b==0?'#3399ff':'#bfbfbf'}">
        <input
          type="text"
          placeholder="登录密码"
          v-model="signForm.password"
          @focus="isblurObj.b=0"
          @blur="isblurObj.b=-1;"
        />
      </div>

未获取焦点时.png

获取焦点后.png