vue实现密码框可见
实现密码框可见功能
在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库可以快速实现更美观的效果，而原生实现则更加灵活。
