vue2的登入注册简单页面代码
时间: 2023-12-24 22:02:47 浏览: 43
以下是一个简单的登入注册页面的 Vue2 代码示例:
```
<template>
<div>
<h2>登入</h2>
<form @submit.prevent="login">
<label>用户名:</label>
<input type="text" v-model="username">
<br><br>
<label>密码:</label>
<input type="password" v-model="password">
<br><br>
<button type="submit">登入</button>
</form>
<br><br>
<h2>注册</h2>
<form @submit.prevent="register">
<label>用户名:</label>
<input type="text" v-model="newUsername">
<br><br>
<label>密码:</label>
<input type="password" v-model="newPassword">
<br><br>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
newUsername: '',
newPassword: ''
}
},
methods: {
login() {
// 处理登入逻辑
console.log('登入成功');
},
register() {
// 处理注册逻辑
console.log('注册成功');
}
}
}
</script>
```
这段代码中,我们通过 `v-model` 将输入框的值绑定到组件的 `data` 属性上。在 `methods` 中定义了 `login` 和 `register` 方法,分别处理登入和注册的逻辑。在模板中,我们使用 `@submit.prevent` 监听表单的提交事件,并调用对应的方法。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)