在Vue 3中实现记住密码功能，你可以使用localStorage或sessionStorage来在用户的浏览器中存储用户的登录信息。以下是一个简单的例子：
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="Username">
<input type="password" v-model="loginForm.password" placeholder="Password">
<label>
<input type="checkbox" v-model="rememberMe"> Remember Me
</label>
<button @click="login">Login</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const loginForm = ref({
username: '',
password: ''
});
const rememberMe = ref(false);
onMounted(() => {
const savedLogin = localStorage.getItem('loginInfo');
if (savedLogin) {
const { username, password } = JSON.parse(savedLogin);
loginForm.value.username = username;
loginForm.value.password = password;
rememberMe.value = true;
}
});
const login = () => {
if (rememberMe.value) {
localStorage.setItem('loginInfo', JSON.stringify(loginForm.value));
} else {
localStorage.removeItem('loginInfo');
}
// 登录逻辑...
};
</script>在这个例子中，当用户勾选记住密码后，登录信息会被保存到localStorage中。当页面加载时，如果之前保存了登录信息，则自动填充表单。用户登录成功后，会根据rememberMe的值来决定是否保存登录信息。如果用户取消勾选记住密码，则会从localStorage中移除保存的登录信息。