vue3-登录表单--输入密码框小眼睛切换问题
在Vue 3中,实现登录表单的密码框小眼睛切换功能,可以通过使用v-model
来绑定输入框的值,并通过一个布尔型数据属性来控制小眼睛的显示状态。以下是一个简单的示例:
<template>
<div class="login-form">
<input type="text" placeholder="Username" v-model="username" />
<input
:type="passwordFieldType"
placeholder="Password"
v-model="password"
/>
<button @click="login">Login</button>
<button @click="togglePasswordVisibility">
<span v-if="!showPassword">Show</span>
<span v-else>Hide</span>
Password
</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const username = ref('');
const password = ref('');
const showPassword = ref(false);
const passwordFieldType = computed(() => (showPassword.value ? 'text' : 'password'));
const togglePasswordVisibility = () => {
showPassword.value = !showPassword.value;
};
const login = () => {
// 登录逻辑
};
return {
username,
password,
showPassword,
passwordFieldType,
togglePasswordVisibility,
login
};
}
};
</script>
<style>
/* 样式内容 */
</style>
在这个示例中,我们使用了计算属性passwordFieldType
来动态地决定密码输入框的类型。当showPassword
的值为true
时,输入框显示为文本框,用户可以看到输入的密码;当showPassword
的值为false
时,输入框显示为密码框,用户看不到输入的密码内容。用户可以通过点击"Show/Hide Password"按钮来切换这两种显示状态。
评论已关闭