uniappvue2写一个注册登录页面
时间: 2023-12-25 07:02:51 浏览: 20
好的,以下是一个简单的注册登录页面的示例代码:
```
<template>
<div>
<div v-if="showLogin">
<h1>登录</h1>
<form>
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="loginForm.email" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="loginForm.password" required>
<br>
<button @click.prevent="login">登录</button>
</form>
<p>没有账号?<a href="#" @click.prevent="showLogin = false">去注册</a></p>
</div>
<div v-else>
<h1>注册</h1>
<form>
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="signupForm.email" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="signupForm.password" required>
<br>
<button @click.prevent="signup">注册</button>
</form>
<p>已有账号?<a href="#" @click.prevent="showLogin = true">去登录</a></p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showLogin: true,
loginForm: {
email: '',
password: ''
},
signupForm: {
email: '',
password: ''
}
}
},
methods: {
login() {
// 实现登录逻辑
},
signup() {
// 实现注册逻辑
}
}
}
</script>
```
该代码使用了 Vue.js 框架和 uni-app 跨平台框架,并以数据驱动方式实现了登录和注册表单的渲染和交互。在实际使用中,你需要在 login 和 signup 方法中实现后端接口的调用,以完成用户登录和注册的逻辑。