当前位置：首页 > VUE

vue实现密码框可见

2026-02-24 10:50:48VUE

实现密码框可见功能

在Vue中实现密码框的可见切换功能，可以通过控制输入框的type属性在password和text之间切换。以下是具体实现方法：

方法一：使用v-model和v-if

<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>

方法三：使用图标代替按钮

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

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

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

方法四：使用第三方UI库（如Element UI）

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

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

以上方法都可以实现密码框的可见切换功能，可以根据项目需求选择合适的方式。使用第三方UI库可以快速实现更美观的效果，而原生实现则更加灵活。

vue实现密码框可见