vue实现登录注册功能代码
时间: 2023-04-05 08:00:48 浏览: 85
以下是一个简单的 Vue 登录注册功能的代码示例:
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="login">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="loginForm.username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="loginForm.password">
<br>
<button type="submit">登录</button>
</form>
<hr>
<h2>注册</h2>
<form @submit.prevent="register">
<label for="newUsername">用户名:</label>
<input type="text" id="newUsername" v-model="registerForm.username">
<br>
<label for="newPassword">密码:</label>
<input type="password" id="newPassword" v-model="registerForm.password">
<br>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: ''
}
}
},
methods: {
login() {
// 发送登录请求
console.log('登录成功')
},
register() {
// 发送注册请求
console.log('注册成功')
}
}
}
</script>
注意:这只是一个简单的示例代码,实际应用中需要进行更多的验证和安全措施。