如何用Vue和iview实现登录密码显示隐藏功能？

本文共计944个文字，预计阅读时间需要4分钟。

iView 简介：iView 是一套基于 Vue.js 的开源 UI 组件库，主要用于 PC 界面中后台产品的开发。

1. 背景 & 近期，在使用 ABP 开发项目中，前端 Vue 输入登录密码时默认隐藏，但用户若输入错误密码则显示输入错误密码。

iview简介

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

1.背景

近期，在使用abp开发项目过程中，前端vue输入登录密码时默认隐藏，但是如果用户输错密码需要切换显示跟隐藏。故有此文。

2.实现最终效果

2.1 隐藏密码

2.2 显示密码

显示密码需要点击密码框左侧眼睛

3.实现思路

3.1 v-if判断当前密码显示状态

密码输入框跟密码图标最外层用Div标签包住，并且用vue的v-if v-else监听其显示还是隐藏状态。