基于vue-elementUI登录页面的密码显示和隐藏切换

登录时的填写密码显示文本或者显示黑点切换其实就是两个div的v-if/else判断；

下面详细说下具体实现过程；（附代码图）

第一步：

     默认密码显示的是黑点：

显示密码文本:

代码部分这样写：

红线框圈住的①就是密码显示为文本的部分；

这里需要注意的一个重点是密码显示为黑点还是文本最主要是看你给input框的type设置的是什么值，如果想显示为文本就type=‘text’，如果想显示为黑点就type=“password”（如下图）

第二步：

    不过有人会疑问你设置的不是文本吗为什么显示的是黑点？

   这就是第二部分 要说的点击事件切换密码；

  我们给显示文本的div和显示黑点的div绑定了v-if和v-else

 然后分别给两个div绑定了事件；（如下图）

然后默认我们在数据里把closePssword设置为false就初始化时显示的是黑点；

然后再通过点击切换密码显示是文本还是黑点（见下图）

大概的实现流程就是这样；