vue 点击小眼睛密码显示隐藏

最新推荐文章于 2024-04-27 02:27:53 发布

原创最新推荐文章于 2024-04-27 02:27:53 发布 · 6.3k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何在Vue.js中创建一个密码输入框，包括密码显示切换、输入验证及响应式设计。通过使用Vue的数据绑定和事件监听，实现了一个具备显示/隐藏密码功能的输入框组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<li>
    <span class="icon password-icon">新密码:</span>
    <input  :type="pwdType" placeholder="请输入新密码" @on-change="userPassword" maxlength="18" v-model="userPassword" @blur="getUserPassword">
    <img :src="seen?openeye:nopeneye" class="eye" alt="" @click="changeType()">
    <span class="from-box-line"></span>
  </li>

data里面:

seen:'',
pwdType: 'password', // 密码类型
openeye: require('@/assets/eye.png'), //图片地址
nopeneye: require('@/assets/neye.png'), //图片地址
userPassword:'',

methods里面:

      changeType() {
        this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
        this.seen = !this.seen;//小眼睛的变化
      },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

M_SSY

关注关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

密码查看小眼睛

zsq199771的博客

09-07

479

原理 js改变input的type值代码部分： HTML INPUT :type="eyesStatus ? 'password' : 'text'" <div v-show="password.length" class="eyes_status" @click="changeEyes"> <img v-if="eyesStatus" src="../assets/img/close-eyes.png" alt="">

vue密码框内容显示隐藏

QSWの

12-28

4713

实现密码框内容显示隐藏效果 <template> <div class="mylogin"> <div class="head"> <img src="../../assets/back.png" @click="back()"/> <span>会员登录&a

5 条评论您还未登录，请先登录后发表或查看评论

vue 点击小眼睛 显示/隐藏

在北风吹起的时候加入我们的队伍在秋雨到来的时候成为彼此的温暖

12-03

2472

vue 点击小眼睛 显示/隐藏

显示与隐藏金额

fanxingxue的博客

09-23

597

无

vue项目中更改密码并验证

qq_42786138的博客

09-03

1299

data() { //此处即表单发送之前验证 let validateNewPassword = (rule, value, callback) => { if (value === this.form.password) { callback(new Error('新密码不能与原密码相同!')) } else { callback()...

vue+elementUi 实现密码显示/隐藏+小图标变化功能

10-15

标题和描述中提到的知识点是关于如何使用Vue框架结合Element UI组件库来实现密码输入框的显示/隐藏功能以及配合的小图标变化功能。具体实现涉及到Vue的响应式数据绑定、事件处理和条件渲染等核心特性，同时利用...

input输入款点击小眼睛显示或隐藏密码

04-19

总结来说，实现“input输入款点击小眼睛显示或隐藏密码”的功能，主要涉及到HTML、CSS和JavaScript的配合。前端开发者需要理解`<input type="password">`的特性，以及如何通过JavaScript监听和改变元素的属性。在...

vue实现密码显示隐藏切换功能

08-27

摘要：本文主要介绍了使用 Vue 实现密码显示隐藏切换功能的方法，通过 HTML 和 JavaScript 代码实现密码输入框的显示和隐藏切换，并且实现了带小眼睛的睁开闭合效果。知识点一：Vue 组件的基本结构在本文中，...

基于vue 实现表单中password输入的显示与隐藏功能

10-16

现在，当用户点击“眼睛”图标或复选框时，`toggleShow`方法会被调用，从而切换`checked`的值，进而改变输入框的类型，实现密码的显示与隐藏。这个示例是基于基础的Vue.js实现，但实际应用中可能需要考虑更多的...

vue3-登录表单--输入密码框小眼睛切换问题

qq_52563030的博客

01-04

2462

el-input直接设置type值也可以实现密码显示隐藏，但是当点击重置按钮前密码为明文，重置后再次输入密码依然为明文状态。登录表单下方有一个重置按钮，点击重置按钮使密码和用户名清空，小眼睛重新回到隐藏密码状态。

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

qq_51196135的博客

03-09

3847

思路：通过click点击改变flag的值，通过flag的值判断眼睛睁开闭合的状态且判断type为password和text两种情况。

web前端学习笔记（登录界面）

BaldIsImpossible的博客

11-03

1075

web前端学习笔记（登录界面）vue背景图有间隙怎么去除修改输入框的提示字样式改变鼠标图标关于position的absolute和fixed实现密码框小眼睛功能设置中间分隔线调节边框 vue背景图有间隙怎么去除把body的外边距设置为0。注意，要设置在最底层的组件里！通常是App.vue body{ margin: 0px; } 修改输入框的提示字样式谷歌浏览器 ::-webkit-input-placeholder { color:snow; }/*Webkit browsers 谷歌，

vue 和 uniapp 的密码框小眼睛（通用）

wangongchao的博客

08-28

5335

密码输入框的小眼睛适合Vue 或者 uniapp使用步骤1动态绑定:type 步骤2在data里声明 Data(){ Return{ seen:'', pwdType: 'password', // 密码类型 openeye: **require**('@/assets/eye.png'), //图片地址 nopeneye: **require**('@/assets/neye.png'), //图片地址 //重要提示：如果是uniapp的话把加粗的require的去掉 } } 步骤3动态绑定小眼睛图片

#vue# mousedown、mouseup事件，JS实现密码框小眼睛显示与隐藏

ZHENGCHUNJUN的博客

07-23

2530

需求：密码框右侧小眼睛，鼠标按下鼠标按键（左、右键均可）就显示出密码，鼠标松开鼠标按键（左、右键均可）密码就隐藏思路：（1）首先就是排版了（不细讲）提供右侧小眼睛的一种做法：把输入框和小眼睛放在一个大的div里面，然后在div里面设置相对定位，在小眼睛里面设置绝对定位（子绝父相），然后right=40%左右，padding-top= 实际尺寸，就可以达到小眼睛在输入框的右侧显示 .signin-item { //父盒子 position: relative..

vue中input点击小眼睛显示和隐藏密码

xu5651的博客

01-06

6332

在登录页中经常有点击小眼睛显示和隐藏密码，就是切换输入框的type，原本是password，来回切换type！ div class="account"> <label class="input_span"> <span>密码</span> <input :type="typePwd" class="inpu...

vue项目中密码输入框点击眼睛眯眼和睁眼

Alan_Walker1的博客

02-22

2055

前端vue element

element表单前面添加红色星号

记不住代码的前端混子

05-08

2749

element表单前面添加红色星号。

VUE前端实现密码输入的显示和隐藏

wujize的博客

04-16

9167

VUE前端实现密码输入的显示和隐藏在用户前端登录时，密码输入框右边增加一个“眼睛”图标，实现用户输入密码的是显示星号还是字符，可以方便用户在输入复杂密码是确认，是一个比较符合用户使用习惯的非功能性设计。一、准备图标准备两个“眼睛”图标，第一个是闭上的，代表不显示密码，密码输入显示为*。SVG图标如下： <svg width="128" height="64" xmlns="http:...

vue elment-ui 密码强度提示的两种方式_elenemt ui密码输入显示强中弱

2401_84447262的博客

04-27

450

【代码】vue elment-ui 密码强度提示的两种方式_elenemt ui密码输入显示强中弱。

前端写密码点击小眼睛能看到

最新发布

02-26

### 实现密码输入框点击眼睛图标切换显示隐藏密码为了实现在前端页面中通过点击眼睛图标来切换密码的显示与隐藏，可以采用多种技术方案。下面提供一种基于HTML、CSS以及JavaScript的方式。 #### HTML结构设置构建基本的表单元素，其中包含用于输入密码的`<input>`标签和作为触发器的眼睛图标的按钮或图像元素： ```html <form> <div class="password-field"> <input id="pwdInput" type="password" placeholder="Enter your password"/> <button type="button" onclick="togglePasswordVisibility()" class="eye-icon">👁️</button>  </div> </form> ``` #### JavaScript逻辑控制编写一段简单的脚本来处理当用户点击眼睛图标时发生的事件，改变输入字段的`type`属性值从而达到切换效果[^1]。 ```javascript function togglePasswordVisibility() { const pwdField = document.getElementById('pwdInput'); if (pwdField.type === 'password') { pwdField.type = 'text'; } else { pwdField.type = 'password'; } } ``` 对于更复杂的应用场景或者框架内开发（如Vue.js），可以通过数据绑定的方式来管理这种交互行为[^3]。例如，在Vue组件内部定义一个布尔类型的变量用来跟踪当前的状态，并将其关联到视图上的相应部分。 #### Vue.js中的实现方式在Vue项目中，可以在模板文件里这样设计： ```vue <div v-bind:class="{ active: isShowingPassword }" @click="isShowingPassword=!isShowingPassword"> <span>{{ isShowingPassword ? 'Hide' : 'Show' }}</span> <i aria-hidden="true"></i> </div> <input :type="isShowingPassword?'text':'password'" name="password"> <script> export default { data(){ return{ isShowingPassword:false, }; }, }; </script> ``` 这种方法不仅简化了DOM操作的过程，还使得代码更加清晰易读并易于维护。 #### jQuery实现方法如果偏好于使用jQuery，则可以在文档就绪之后初始化监听器，以便响应用户的动作[^4]。 ```javascript $(document).ready(function($) { $('.eye-icon').on('click', function(event){ var $target = $(event.target); var targetInput = $('#pwdInput'); if ($target.hasClass('show')) { $target.removeClass('show'); targetInput.attr('type','password'); } else { $target.addClass('show'); targetInput.attr('type','text'); } event.preventDefault(); }); }); ``` 以上就是几种不同的实现思路和技术栈下的具体实践案例，每种都有其适用范围和发展背景，可以根据项目的实际情况和个人喜好做出选择。