Vue+原生CSS实现根据输入调整输入框样式

实现结果

实现内容

1）用户名和密码框根据不同的输入切换样式
2）点击小眼睛按钮显示密码

实现方法

1）input框中书写placeholder是不行的，需要采用label标签

<div :class="{
     login_name: true,
     input_wrong: wrongInput,
     input_wrong_blur: wrongInputBlur,
     input_true: trueInput,
     input_true_blur: trueInputBlur,
}">
  <input type="text" v-model="user_name" @focus="changeWhenFocus" @blur="changeWhenBlur"/>
  <label :class="{
            label_default: true,
            label_wrong: wrongInputLabel,
            label_wrong_blur: wrongInputLabelBlur,
            label_true: trueInputLabel,
            label_true_blur: trueInputLabelBlur,
         }">邮箱/手机号码/小米ID
  </label>
</div>

思路：div和label都有默认的样式，并有数个初始未激活的样式；用户每次对input框进行focus（点击）和blur（不点击）时操作，都会触发methods中的方法，对data中的布尔值进行处理，随后div和label将根据这些布尔值激活需要的属性。
2）很巧妙的方法：<input :type="passwordOrText">
默认情况下，input框为<input type="password">
点击小眼睛按钮之后，input框更改为<input type="text">