下面是一个使用 Vue 构建登录界面的示例代码:
<template>
<div class="login-page">
<form @submit.prevent="login">
<h1>登录</h1>
<label>
用户名:
<input v-model="username" type="text" required />
</label>
<br />
<label>
密码:
<input v-model="password" type="password" required />
</label>
<br />
<button type="submit">登录</button>
</form>
<p>还没有账户?<a href="#" @click="showRegisterForm">注册</a></p>
<p><a href="#" @click="showForgotPasswordForm">忘记密码?</a></p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
// 如果登录成功,则跳转到主页
},
showRegisterForm() {
// 显示注册表单
},
showForgotPasswordForm() {
// 显示忘记密码表单
}
}
}
</script>
这段代码定义了一个 Vue 组件,该组件包含一个登录表单,以及注册和忘记密码的链接。表单的提交会调用 login
方法,而注册和忘记密码的链接会调用 showRegisterForm
和 showForgotPasswordForm
方法。
注意,这只是一个示例代码,实际应用中还需要根据需求进行更多的开发和调整。