用vue写原生input密码框的文字显示/隐藏，通过v-if判断或改变type属性实现

最新推荐文章于 2023-02-21 13:55:44 发布

asteriaV

最新推荐文章于 2023-02-21 13:55:44 发布

阅读量1.7k

点赞数

分类专栏： vue html/css

本文链接：https://blog.csdn.net/asteriaV/article/details/99634738

版权

vue 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

html/css

13 篇文章 0 订阅

订阅专栏

要通过vue根据所提供的图片点击时显示/隐藏密码框的内容！

效果图

方法一：

通过点击最右边的图标来实现，可以结合vue的v-if ,v-else判断加点击事件完成。

//表单中密码部分  
<el-form-item prop="password">
            <div class="inputs">
              <label class="label1">
                <img src="../assets/icons/pass.png" class="icon_img" />
              </label>
              <input
                v-model="FormData.password"
                type="password"
                placeholder="请输入密码"
                show-password
                class="longin_inputs"
                v-if="ispwda"
              />
              <input
                v-model="FormData.password"
                type="text"
                placeholder="请输入密码"
                show-password
                class="longin_inputs"
                v-else
              />
              <span class="label2" @click="showPwd()">
                <img src="../assets/icons/pwda.png" class="icon_img" v-if="ispwda" />
                <img src="../assets/icons/pwds.png" class="icon_img" v-else />
              </span>
            </div>
          </el-form-item>

分别给被点击的图标和改变的input框绑定一个值，再判断即可。

 ispwda: true,

showPwd() {
      if (this.ispwda) {
        this.ispwda = false;
      } else {
        this.ispwda = true;
      }
    }

方法二：通过改变input框的type属性实现

 <el-form-item prop="newPwd">

                <input
                  v-model="ruleForm.newPwd"
                  :type="isPassword"
                  placeholder="输入新密码"
                  class="form-input"
                  clearable               
                />
                <span class="label2" @click="showPwd()">
                  <img src="../../assets/icons/hide2.png" class="icon_img" v-if="isnewPwd" />
                  <img src="../../assets/icons/show2.png" class="icon_img" v-else />
                </span>
            
          </el-form-item>

 return {
      isPassword:'password',
      isnewPwd：false
      
  },
  created() {},
  methods: {
showPwd() {
      if (this.isnewPwd) {
        this.isPassword='text';
        this.isnewPwd = false;
       
      } else {
        this.isPassword='password';
        this.isnewPwd = true;
        
      }
    }

}