vue使用refs完成input密码框明密文切换(简单版)

最新推荐文章于 2023-12-02 17:33:38 发布

Artoria-Pendragon

最新推荐文章于 2023-12-02 17:33:38 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45381828/article/details/100581562

版权

本文介绍如何在Vue项目中使用refs实现密码输入框的明文和密文切换功能。通过定义全局变量showpass，结合v-if指令控制显示状态，利用$refs动态修改input元素的type属性完成切换效果。

摘要由CSDN通过智能技术生成

1，首先，先下载好自己需要的图片或图标，推荐使用阿里巴巴图标库，图标比较齐全。
2，定义一个全局变量，示例：

		return {
		      showpass:false,//明密文全局变量
		    };

这里showpass需要用于点击切换使用
3，html代码

		   <div @click="show">
              <span class="iconfont icon-Group-" v-if="showpass"></span>
              <span class="iconfont icon-biyan" v-else></span>
            </div>

这里使用v-if判断showpass为true/false，true代表明文显示，false代表密文显示
密文效果：
在这里插入图片描述
明文效果：

文字切换同时图标也要根据showpass全局变量进行切换，这里使用到了refs这个方法来获取input的type属性和改变input的type属性