vue element 好看的注册页面
时间: 2023-10-06 19:07:13 浏览: 41
对于一个好看的注册页面,你可以使用 Vue.js 和 Element UI 来实现。下面是一个简单的示例代码,展示了一个基本的注册表单页面:
```html
<template>
<div class="register-page">
<el-form ref="registerForm" :model="registerForm" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
registerForm: {
username: '',
password: '',
confirmPassword: ''
}
};
},
methods: {
register() {
// 在这里处理注册逻辑
// 可以提交表单数据到后端进行验证和保存
}
}
};
</script>
<style>
.register-page {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
</style>
```
这个示例使用了 Element UI 提供的表单组件和按钮组件,通过 v-model 指令实现数据的双向绑定。你可以根据自己的需求进行样式和交互的定制,并在 `register` 方法中处理具体的注册逻辑。希望这个示例对你有帮助!