el-input 标签中密码的显示和隐藏功能的实例代码

效果展示：

　　密码隐藏：

　　密码显示：

代码展示：

　　一：<el-input>标签代码

 <el-form-item label="密码" prop="password">
   <el-input :type="passw" v-model="adduser.password" style="width: 300px;" >
      <%-- input中加图标必须要有slot="suffix"属性，不然无法显示图标 --%>
      <i slot="suffix" :class="icon" @click="showPass"></i>
   </el-input>
 </el-form-item>

　　二：<script type="text/javascript">中代码

<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      users:[],
      total:100,
      pageSize:5,
      pageNum:1,
      //用于显示或隐藏添加修改表单
      add:false,
      //用于改变Input类型
      passw:"password",
      //用于更换Input中的图标
      icon:"el-input__icon el-icon-view",
      adduser:{
        id:null,
        name:null,
        password:null,
        dept_id:null
      },
    },
    methods:{
　　　　　　　//密码的隐藏和显示
      showPass(){
　　　　　　　　　　//点击图标是密码隐藏或显示
        if( this.passw=="text"){
          this.passw="password";
          //更换图标
          this.icon="el-input__icon el-icon-view";
        }else {
          this.passw="text";
          this.icon="el-input__icon el-icon-loading";
        };
      }
    },
  })
</script>

总结

以上所述是小编给大家介绍的el-input 标签中密码的显示和隐藏,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

  • element el-input directive数字进行控制

    使用自定义指令格式化el-input 背景 使用element开发的过程中遇到循环的数据只能输入数字,并且有不要小数点,有需要小数点的 使用vue directive 进行控制 开发 页面使用方式 v-numberInt:0="item.first_fee" 0为保留几位小数 <tr v-for="(item,index) in form.valuation_rules" :key="index"> <td class=&quo

  • el-input 标签中密码的显示和隐藏功能的实例代码

    效果展示: 密码隐藏: 密码显示: 代码展示: 一:<el-input>标签代码 <el-form-item label="密码" prop="password"> <el-input :type="passw" v-model="adduser.password" style="width: 300px;" > <%-- input中加图标必须要有slot=&qu

  • vue基于input实现密码的显示与隐藏功能

    vue基于input实现密码的显示与隐藏功能

    前言 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可.但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示. 实现效果 实现思路 1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏:2.在页面中循环遍历data中的p

  • Vue基于iview实现登录密码的显示与隐藏功能

    Vue基于iview实现登录密码的显示与隐藏功能

    目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • Android 下载文件通知栏显示进度条功能的实例代码

    1.使用AsyncTask异步任务实现,调用publishProgress()方法刷新进度来实现(已优化) public class MyAsyncTask extends AsyncTask<String,Integer,Integer> { private Context context; private NotificationManager notificationManager; private NotificationCompat.Builder builder; public M

  • Android中 TeaScreenPopupWindow多类型筛选弹框功能的实例代码

    Github地址 YangsBryant/TeaScreenPopupWindow (Github排版比较好,建议进入这里查看详情,如果觉得好,点个star吧!) 引入module allprojects { repositories { google() jcenter() maven { url 'https://www.jitpack.io' } } } implementation 'com.github.YangsBryant:TeaScreenPopupWindow:1.0.2' 主

  • JS实现登录页密码的显示和隐藏功能

    JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效果图: <ul class="form-area"> <li> <div class="item-content"> <div class="item-input"> <input type=&q

  • jQuery仅用3行代码实现的显示与隐藏功能完整实例

    jQuery仅用3行代码实现的显示与隐藏功能完整实例

    本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能.分享给大家供大家参考.具体如下: jQuery技术相当好使用,的确可以用很少的代码实现想要的功能,比如这款经常用到的"显示"与"隐藏"的功能,只需要3行代码就实现了,确实够给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下: <!doctype html>

  • 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐藏.今天在这里,想跟大家分享一下这个小技巧,希望各位大神不要拍砖哦~~~ 一.要求 input输入框,在光标显示时,隐藏提示信息:光标离开输入框时,显示提示信息. 二.方法 1.给该input取id名,Onfocus="方法名1(this)",onblur="方法名2(this)

随机推荐