Vue——密码框显示和隐藏密码功能

方法一：使用element直接可以用的，密码显示隐藏功能<el-input placeholder="请输入密码" v-model="input" show-password></el-input><script>export default {data() {return {input: ''}}}</script>方法2、<el-form-

还需无止境

4337人浏览 · 2021-12-20 21:02:13

还需无止境 · 2021-12-20 21:02:13 发布

  方法一：使用element直接可以用的，密码显示隐藏功能
  <el-input placeholder="请输入密码" v-model="input" show-password></el-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

方法2、
<el-form-item label prop="passWord">
    <el-input v-model="formData.passWord" placeholder="请输入密码" :type="type"></el-input>
	<i class="" @click="flags=!flags" :class="formData.passWord?elIcons:''"></i>
</el-form-item>
//data定义值
    return {
      flags: false,
    }
    
//使用computed
  computed: {
    type() {
      return this.flags ? 'text' : 'password'
    },
    elIcons() {
      return this.flags ? 'el-icon-view' : 'iconfont iconbiyanjing'
    }
  },