前言：
大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。
一、准备图标
这是 element-ui框架中的 Icon 图标
当然也可以使用下面的两个图片
二、Vue程序界面的展示
网络异常，图片无法展示
|
网络异常，图片无法展示
|
密码的显示和隐藏
三、代码
讲解（所需）代码（input使用的是element-ui框架中，引入的图标也是，如果想要使用图片的话使用img引入）
使用 Color 的true或false判断显示图标的样式，input框则使用 Type 的样式进行显示，@click=“Show” 点击修改密码的显示或者隐藏
下面有上面图片展示代码
// html代码 <el-input v-model="form.password" :type="Type"></el-input> // 图标 <i class="el-icon-view" @click="Show" :class="{ icon: Color }"></i> // img图片 <img src="https://ucc.alicdn.com/images/user-upload-01/20200416152056256.png" v-if="Color" /> <img src="https://ucc.alicdn.com/images/user-upload-01/20200416151922667.png" v-if="!Color" /> // 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框架中引入的图标）
<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <!-- rules 正则 --> <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm" > <el-form-item label="用户名" prop="name"> <el-input type="text" v-model="form.name" autocomplete="off" ></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" :type="Type"></el-input> <i class="el-icon-view" @click="Show" :class="{ icon: Color }"></i> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div> </template> <script> export default { name: "Login", data() { return { // input框输入的值 form: { // 账号 name: "", // 密码 password: "", }, // 密码的可见不可见 Type: "password", Color: false, }; }, methods: { // 密码的可见和不可见 Show() { // 点击改变input框的展示方式 this.Type = this.Type === "password" ? "text" : "password"; this.Color = !this.Color; }, }, }; </script> <style lang="scss"> .login { width: 100%; height: 100%; position: absolute; background: url("../assets/bg.jpg") center no-repeat; background-size: 100% 100%; display: flex; align-items: center; justify-content: center; .box-card { width: 450px; background-color: #65768557; color: #fff; text-align: center; .el-form-item { position: relative; i { color: rgb(221, 216, 216); position: absolute; top: 30%; right: 10px; } .icon { color: rgb(44, 43, 43); } } .el-form-item__label { color: #fff; } // 标题 .clearfix { font-size: 34px; } // 按钮 .el-button { width: 100%; } } } </style>
总结：
以上就是 vue基于 input 实现密码的显示与隐藏功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
