目录

• 前言：
• 一、准备图标
• 二、Vue程序界面的展示
• 三、代码
• 总结：

前言：

大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。

一、准备图标

这是 element-ui框架中的 Icon 图标

点击跳转至 element-ui 框架中的 lcon 图标页：https://element.eleme.cn/#/zh-CN/component/icon

当然也可以使用下面的两个图片

二、Vue程序界面的展示

密码的显示和隐藏

三、代码

讲解（所需）代码（input使用的是element-ui框架中，引入的图标也是，如果想要使用图片的话使用img引入）

使用 Color 的true或false判断显示图标的样式，input框则使用 Type 的样式进行显示，@click=“Show” 点击修改密码的显示或者隐藏

下面有上面图片展示代码

// html代码

// 图标

// img图片
// js代码
Type: "password",
Color: false,Show() {// 点击改变input框的展示方式this.Type = this.Type === "password" ? "text" : "password";this.Color = !this.Color;
},// css代码
i {color: rgb(221, 216, 216);position: absolute;top: 30%;right: 10px;
}
.icon {color: rgb(44, 43, 43);
}

上图展示全部代码（里面使用的是element-ui框架中引入的图标）

总结：

以上就是 vue基于 input 实现密码的显示与隐藏功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog