用vue框架写出登录注册界面
时间: 2023-12-25 10:47:37 浏览: 38
好的,下面是一个简单的登录注册界面的 Vue 代码示例:
```html
<template>
<div>
<h2>登录</h2>
<form>
<label>用户名:</label>
<input type="text" v-model="username" required>
<label>密码:</label>
<input type="password" v-model="password" required>
<button type="submit" @click.prevent="login">登录</button>
</form>
<hr>
<h2>注册</h2>
<form>
<label>用户名:</label>
<input type="text" v-model="newUsername" required>
<label>密码:</label>
<input type="password" v-model="newPassword" required>
<button type="submit" @click.prevent="register">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
newUsername: '',
newPassword: ''
}
},
methods: {
login() {
// 处理登录逻辑
console.log('登录', this.username, this.password)
},
register() {
// 处理注册逻辑
console.log('注册', this.newUsername, this.newPassword)
}
}
}
</script>
```
这个示例中,我们使用了两个 `<form>` 元素,分别用于登录和注册。在每个表单中,我们使用了 `<label>` 和 `<input>` 元素,分别表示表单项的标签和输入框。我们使用了 `v-model` 指令来将表单项的值与组件的 `data` 对象中的属性绑定起来。当用户点击“登录”或“注册”按钮时,我们分别调用了 `login` 和 `register` 方法,这里只是打印了一些调试信息,你可以根据实际需求进行修改。