一、html部分

    <div style="margin-top: 200px;background: #42b983;width: 200px;height: 100px"><input :type="passwordType" v-model="password" placeholder="请输入账号"/><img :src="status" alt="" @click="changeStatus()"/></div>

二、js部分

初始化

  export default {data() {return {status:require('../src/assets/visible.png'),passwordType:'password',password:'',}}}

函数部分

      changeStatus(){this.passwordType = this.passwordType==='password'?'text':'password';this.status = this.status == require('../src/assets/visible.png')?require('../src/assets/unVisible.png'):require('../src/assets/visible.png');},

三、效果图

点击眼睛后，就能显示输入的内容了。

这是背景穿透后的样式

input密码框显示与隐藏相关推荐

html密码框输入内容隐藏,密码框显示提示文字的功能实现
在密码输入框内显示提示的文字,引导用户操作,实现的效果如下图显示. 未输入密码前: 输入密码后: 由于js无法直接控制input文本框中的type属性,因此无法通过js控制input文本框在密码框和普 ...
HTML里怎么设置密码框为星号,input密码框输入后设置显示为星号或其他样式
预览效果核心代码 {{"*".repeat(text.length)}} :type="type=='number'?'tel':'text'" ref=&q ...
vue基于 input 实现密码的显示与隐藏功能
目录前言: 一.准备图标二.Vue程序界面的展示三.代码总结: 前言: 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非 ...
微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
html密码的显示与隐藏
html密码的显示与隐藏眼睛睁开眼睛闭上 <p><label for="mi">密&nbsp&nbsp&nbsp&nbsp ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
密码的显示与隐藏php,el-input 标签中密码的显示和隐藏功能的实例代码
效果展示: 密码隐藏: 密码显示: 代码展示: 一:标签代码二: var app = new Vue({ el:"#app", data:{ users:[], total:10 ...
如何实现密码的显示和隐藏？
如图所示,我们在登录账号的时候经常会看到密码的显示和隐藏是可以进行切换的,那么到底怎么实现这个功能呢? 其实原理很简单: 通过点击事件将密码输入框的属性"password"改为&q ...
解决 input密码框自动填充
火狐上input密码框自动填充值的有关问题 By wangzhehui at 2014-06-07 117 阅读 0 回复 0.0 希赛币请点击下面回答中的"采纳为答案&q ...
登录页面的密码的显示与隐藏
登录用户密码的显示与隐藏(样式自行定义,仅写了简单的代码): html部分: <div class="form-group"><img src="img ...

input密码框显示与隐藏

input密码框显示与隐藏

一、html部分

二、js部分

三、效果图

input密码框显示与隐藏相关推荐

最新文章

热门文章