Vue中如何通过iview组件实现登录界面密码的显示与隐藏切换？

本文共计948个文字，预计阅读时间需要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监听其显示还是隐藏状态。