当前位置：首页 > VUE

vue实现密码框显示

2026-02-23 19:18:30VUE

Vue 实现密码框显示与隐藏

在 Vue 中实现密码框的显示与隐藏功能，可以通过切换输入框的 type 属性（password 或 text）来实现。以下是几种常见实现方式：

使用 v-model 和 v-if/v-show

通过绑定 type 属性，配合按钮切换密码显示状态：

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

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  }
}
</script>

使用计算属性优化

计算属性可以简化模板中的逻辑判断：

<template>
  <div>
    <input :type="inputType" v-model="password" placeholder="输入密码">
    <button @click="togglePassword">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  },
  computed: {
    inputType() {
      return this.showPassword ? 'text' : 'password'
    },
    buttonText() {
      return this.showPassword ? '隐藏' : '显示'
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    }
  }
}
</script>

添加图标样式

结合 Font Awesome 或其他图标库，提升用户体验：

<template>
  <div class="password-container">
    <input :type="inputType" v-model="password" placeholder="输入密码">
    <span class="toggle-icon" @click="togglePassword">
      <i :class="['fa', showPassword ? 'fa-eye-slash' : 'fa-eye']"></i>
    </span>
  </div>
</template>

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

<style>
.password-container {
  position: relative;
  display: inline-block;
}
.toggle-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>

使用第三方组件库

如果项目中使用 Element UI 或 Vuetify 等 UI 库，可以直接使用其提供的密码输入组件：

Element UI 示例：

<template>
  <el-input
    v-model="password"
    placeholder="请输入密码"
    show-password
  ></el-input>
</template>

Vuetify 示例：

<template>
  <v-text-field
    v-model="password"
    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
    :type="showPassword ? 'text' : 'password'"
    @click:append="showPassword = !showPassword"
  ></v-text-field>
</template>

以上方法均可实现密码显示/隐藏功能，开发者可根据项目需求选择适合的实现方式。

vue实现密码框显示