目录
前言：一、准备图标二、Vue程序界面的展示三、代码总结：前言：
大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。
一、准备图标
这是 element-ui框架中的 Icon 图标
点击跳转至 element-ui 框架中的 lcon 图标页：/#/zh-CN/component/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图片<imgsrc="https://img-/152056256.png"v-if="Color"/><imgsrc="https://img-/151922667.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-inputtype="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 实现密码的显示与隐藏功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：/weixin_62897746?type=blog
