当前位置：首页 > VUE

vue密码显示隐藏实现

2026-02-24 11:00:06VUE

实现密码显示/隐藏功能

在Vue中实现密码显示与隐藏功能，可以通过结合v-model和v-on指令来控制输入框的类型属性。

模板部分代码示例：

<template>
  <div class="password-input">
    <input 
      :type="showPassword ? 'text' : 'password'" 
      v-model="password" 
      placeholder="请输入密码"
    >
    <button @click="togglePassword">
      {{ showPassword ? '隐藏' : '显示' }}
    </button>
  </div>
</template>

脚本部分代码示例：

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    }
  }
}
</script>

使用图标代替文本按钮

可以使用字体图标库（如Font Awesome）来提升用户体验。

安装Font Awesome：

vue密码显示隐藏实现

npm install @fortawesome/fontawesome-free

使用图标示例：

<template>
  <div class="password-input">
    <input 
      :type="showPassword ? 'text' : 'password'" 
      v-model="password"
    >
    <i 
      class="fas" 
      :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" 
      @click="togglePassword"
    ></i>
  </div>
</template>

添加样式增强视觉效果

为密码输入框添加基本样式可以改善外观。

样式示例：

vue密码显示隐藏实现

<style scoped>
.password-input {
  position: relative;
  display: inline-block;
}

.password-input input {
  padding: 8px;
  padding-right: 30px;
}

.password-input i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>

使用第三方组件库

如果需要快速实现，可以使用现成的UI组件库如Element UI或Vuetify。

Element UI示例：

<template>
  <el-input
    v-model="password"
    :type="showPassword ? 'text' : 'password'"
    placeholder="请输入密码"
  >
    <template #suffix>
      <i 
        class="el-icon-view" 
        @click="showPassword = !showPassword"
      ></i>
    </template>
  </el-input>
</template>

表单验证集成

可以结合Vuelidate或VeeValidate进行表单验证。

Vuelidate集成示例：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  },
  validations: {
    password: {
      required,
      minLength: minLength(6)
    }
  }
}