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 标签中密码的显示和隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-07-17

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

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

JavaScript监听文本框回车事件并过滤文本框空格的方法

本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

Android开发-之监听button点击事件的多种方法

在Android下,事件的发生是在监听器下进行,android系统可以响应按键事件和触摸屏事件,本文主要介绍了button点击事件的方法 一.实现button点击事件的方法 实现button点击事件的监听方法有很多种,这里总结了常用的四种方法: 1.匿名内部类 2.外部类(独立类) 3.实现OnClickListener接口 4.添加XML属性 每一种方法都有它的优点也有它的不足,那么接下来就来详细的讲解这四个实现方法 二.具体实现 1.匿名内部类: 在Android开发中我们会经常看到各种匿名

RecyclerView中监听EditText变化的BUG的解决方法

需求:有一个列表,列表中有一个edittext(只能输整形),外部有一个整形变量Int,每次改变列表中其中一项的edittext的值时,外部的Int都会改变. 既然这样,我们就需要对edittext进行addTextChangedListener监听,一般做法是在afterTextChanged中对外部进行循环累加,但是想想,每一次你改变edittext都要进行一次时间复杂度为n的循环的话,想想就觉得这个算法很那啥,所以我想了另一个算法,每次改变其中一个item的值时,用总的值减去原item的e

vue+axios+element ui 实现全局loading加载示例

实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

vue使用$emit时,父组件无法监听到子组件的事件实例

vue使用$emit时,父组件无法监听到子组件的事件的原因是$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名 <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:eEvent=

Vue 监听列表item渲染事件方法

直入正题,不废话! 使用Vue渲染列表是很简单方便的,但如果需要在渲染item的时候去监听事件就无法实现了,楼主我翻遍了Vue的api也没找到合适的方法去解决,其中也提到使用watch和vue.nextClick 监听,但这些都不能实现,苦恼啊,不过机智的我还是想到了曲线救过的方法,利用过滤器来实现,代码如下 <li v-for="item in list"> {{item.content | setEvent item.id , item.name}}</li>

vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf

element ui时间日期选择器el-date-picker报错Prop being mutated:&quot;placement&quot;解决方式

目录 发现错误 解决 补充:el-date-picker 初始化报错 总结 发现错误 这两天在写新项目的时候,遇到了element ui 时间日期选择器一直报错 [Vue warn]: Avoid mutating a prop directly since the value will beoverwritten whenever the parent component re-renders.Instead, use a data or computed property based on

Vue 实时监听窗口变化 windowresize的两种方法

下面给大家分享两种方法来介绍Vue 实时监听窗口变化 windowresize,具体内容如下所示: 方法一: First-step : 定义变量 data(){ return{ formLabelWidth : '123px' } }, Second-step:   根据生命周期 在mounted 中绑定 窗口变化 mounted(){ const that = this window.onresize = () => { return (() => { window.screenWidth