uniapp 密码框的眼睛

news2025/1/25 9:25:25

效果展示:

uniapp input 官网链接:链接

按照官方文档,uni-icon出不来。

通过自己的方法解决了,解决方案如下:

代码:

                 <uni-forms-item name="password">
                    <input
                      class="uni-input"
                      placeholder="请输入密码"
                      :password="!showPassword"
                      v-model="loginInfo.password"
                    />
                    <uni-icons
                      type="eye"
                      size="30"
                      @click="changePassword"
                      color="rgb(2 ,135, 253)"
                      v-if="showPassword"
                    ></uni-icons>
                    <uni-icons
                      type="eye-slash"
                      size="30"
                      @click="changePassword"
                      v-else
                    ></uni-icons>
                  </uni-forms-item>

思路如下:

 通过v-if控制显示不同的眼睛(即选中/未选中状态)

//js方法
    changePassword() {
      console.log("chick showPassword>>>", this.showPassword);
      this.showPassword = !this.showPassword;
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1575821.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

批发批量订购下单商城公众号 小程序_博纳软云

批发批量订购下单商城——满足您的批量采购需求 在如今快节奏的商业环境中&#xff0c;批发批量订购已成为众多企业和个人创业者的首选采购方式。为了满足广大用户的批量采购需求&#xff0c;我们特别推出了批发批量订购下单商城&#xff0c;为您提供一站式的采购解决方案。 …

牛客论坛项目中使用到Redis的地方总结

实体分为很多类&#xff0c;实体的确定要通过实体类型和实体id两个属性同时确定。牛客论坛中使用到了3类实体&#xff1a; 1 登录 使用到的Redis命令&#xff1a; set key value // 设置指定key的值为value get key // 获取指定key的值1.1 存储/获取验证码 验证码文本&…

【iOS】UITableView性能优化

文章目录 前言一、优化的本质二、卡顿产生原因三、CPU层面优化1.使用轻量级对象2.cellForRowAtIndexPath方法中不要做耗时操作3.UITableView的复用机制4.提前计算好布局了解tableView代理方法执行顺序cell高度计算rowHeightestimatedRowHeight 高度计算进行时机rowHeight计算时…

无参数绕过RCE

一.什么是无参数 顾名思义&#xff0c;就是只使用函数&#xff0c;且函数不能带有参数&#xff0c;这里有种种限制&#xff1a;比如我们选择的函数必须能接受其括号内函数的返回值&#xff1b;使用的函数规定必须参数为空或者为一个参数等 无参数题目特征 if(; preg_replace…

这就是AI眼中的物理世界:OpenAI Sora音乐短片《Worldweight》和超现实影片《气球人》

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

Java8关于Function接口

Java学习-Function接口 1 函数式接口简介和学习地址2 两种常见的函数式接口2.1 Runnable&#xff1a;执行接口&#xff0c;不接收参数&#xff0c;也无返回结果。2.2 Consumer&#xff1a;作为消费接口&#xff0c;接收一个参数&#xff0c;无返回结果。 3 初识3.1 定义Functio…

JVM从1%到99%【精选】-初步认识

目录 &#x1f95e;1.什么是JVM &#x1f37f;2.JVM的功能 &#x1f953;3.常见的JVM &#x1f32d;4.JVM的位置 &#x1f9c2;5.JVM的整体结构 &#x1f383;6.JVM的生命周期 &#x1f388;7.JVM的架构模型 1.什么是JVM JVM本质上是一个运行在计算机上的程序,他的职责…

WPS快速将插入Excle数据插入Word

前置条件&#xff1a; 一张有标题、数据的excle表格word中的表格与excle表格标题对应或包含电脑已经安装WPS软件 第一步、根据word模板设计excle模板&#xff0c;标头对应 第二步、word上面选【引用】--【邮件】&#xff0c;选打开数据源&#xff0c;找到excle文件&#xff0c;…

vscode-插件开发-hello world-创建初始模板

参考vscode官方示例&#xff1a;如何创建你的第一个插件开发项目模板的步骤进行了下文操作。 目录 前言1.环境配置全局安装 yo, generator-code 2. 新建一个插件项目模板问题1: F5 按键无法启动launch.json调试(解决)问题1 描述:问题1: 找错误问题1: 可行的解决方案 3. 开发插…

Linux部署sonarqube+Gogs+Jenkins(二)

Linux部署sonarqubeGogsJenkins 一、Jenkins执行任务1、使用源码管理拉取代码-操作步骤第一步&#xff1a;确认环境&#xff0c;进入到Jenkins【系统管理】—>【全局工具配置】—>【Git】为下图显示&#xff1b;第二步&#xff1a;构建项目时对项目的源码管理选择 Git第三…

基于R语言地理加权回归、主成份分析、判别分析等空间异质性数据分析教程

原文链接&#xff1a;基于R语言地理加权回归、主成份分析、判别分析等空间异质性数据分析教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247600473&idx6&sn431e9408a42862d29fe4f4ef7703595b&chksmfa8208becdf581a820d9479d2aa61b88e96612c4ab72b0…

系统架构评估_2.SAAM方法

SAAM&#xff08;Scenarios-based Architecture Analysis Method&#xff09;是卡耐基梅隆大学软件工程研究所&#xff08;SEI at CMU&#xff09;的Kazman等人于1983年提出的一种非功能质量属性的架构分析方法&#xff0c;是最早形成文档并得到广泛使用的软件架构分析方法。最…

设计方案:914-基于64路AD的DBF波束形成硬件

一、硬件概述 &#xff24;&#xff22;&#xff26;技术的实现全部是在数字域实现&#xff0c;然而天线阵列接收的信号经过多次混频后得到的中频信号是模拟信号&#xff0c;实现&#xff24;&#xff22;&#xff26;处理并充分发挥&#xff24;&#xff22;&…

pdf操作器(图片转文字、PDF转word、PDF拆分、图片jpg、png互转)

pdf操作器&#xff08;不用联网图片转文字、PDF转word、PDF拆分、图片jpg、png互转&#xff09;介绍目前该软件实现了以下功能 pdf转wordpdf拆分图片&#xff0c;图片导出在桌面的一个文件夹里图片合并为pdf压缩、转换图片格式&#xff08;jpg和png&#xff09;OCR图片转文字&…

如何在社交媒体中使用增强现实来提高客户参与度?

目录 1. 增强现实在社交媒体中的应用是如何发展的 2. 社交媒体营销和广告中的增强现实 3. 社交媒体上的增强现实滤镜和镜头 4. 社交媒体平台上的增强现实购物 5. 利用社交媒体的增强现实事件和品牌激活 6. 增强现实在社交媒体中的未来是什么 7. 社交媒体中的增强现实常见…

xilinx 7系列fpga上电配置

一、前言 Xilinx FPGA通过加载比特流到内部存储单元来进行配置。 Xilinx FPGA存在两种数据配置路径&#xff0c;一种是满足最小引脚需求的串行路径&#xff0c;一种是可用8位、16位或32位来连接到行业的高性能通用接口&#xff0c;如处理器&#xff0c;8位或者16位并行的闪存…

轻量化日志中心 Grafana Loki

需要集中的日志系统的原因 目前现状,每个服务生产上有三台,定位生产问题,需要连上一台机器,然后使用 cd / tail / less / grep / sed / awk 等 linux命令去日志里查找故障原因。如果在这台机器没搜索到线索,就去另外两台机器上查日志。 但在分布式系统中,众多服务分散部…

链路代价信息、链路状态信息(链路状态通告LSA)

链路代价信息"link cost information" 通常指的是**在网络中&#xff0c;数据包从一个节点传输到另一个节点所需承担的“成本”或者“开销”&#xff0c;这个概念常用于路由算法和网络设计中**。以下是一些关键要点&#xff1a; 1. **路径开销**&#xff1a;路径开…

吹爆!遥感高光谱分类(Python)

目录 一、数据集下载 二、安装包 三、数据处理 四、模型训练 五、模型推理 六、踩坑记录 一、数据集下载 Hyperspectral Remote Sensing Scenes - Grupo de Inteligencia Computacional (GIC) (ehu.eus) Installing SPy — Spectral Python 0.21 documentation 二、安装…

企业计算机服务器中了locked勒索病毒怎么办,locked勒索病毒解密流程步骤

网络技术的不断发展为企业的生产运营提供了极大便利&#xff0c;也让企业的生产效率大大提高&#xff0c;但网络是一把双刃剑&#xff0c;给给企业的数据安全问题带来严重威胁。近期&#xff0c;云天数据恢复中心接到浙江某商贸公司的求助&#xff0c;企业计算机服务器遭到了lo…