在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"按钮来切换这两种显示状态。