vue 如何实现切换密码的显示与隐藏

一、vue 实现切换密码的显示与隐藏

1. 在 data 中定义 showPwd，默认为 false，用来控制密码的显示与隐藏。定义 pwd，默认为空，是密码的值，代码如下所示：

data() {
  return {
    showPwd: false,
    pwd: ''
  }
}

2. 在密码的显示与隐藏中，有两种输入框，一个是类型为text的文本框用来展示密码，另一个是类型为password的密码框用来隐藏密码。由于showPwd的默认值为false，所示设置text的框为v-if，默认显示密码，而设置password的框为 v-else，默认不显示密码，同时也进行v-model的双向数据绑定，绑定pwd的值，代码如下所示：

<input type="text" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd">
<input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd">

3. 在旁边控制的按钮上，进行对象样式绑定，显示不同的样式，同时绑定点击事件，将 !showPwd 的值赋值给 showPwd。在下面的显示中，通过 showPwd 值的不同显示不同的文本，代码如下所示：

<div class="switch_button off" :class="showPwd?'on' : 'off'" @click="showPwd=!showPwd">
    <div class="switch_circle" :class="{right: showPwd}"></div>
    <span class="switch_text">{{ showPwd ? 'abc' : '...'}}</span>
</div>