请使用elementui和html写一个个人页面
时间: 2023-12-19 17:07:52 浏览: 65
好的,以下是一个简单的个人页面的代码,使用了ElementUI组件库和HTML:
```
<template>
<div>
<el-container>
<el-header>
<h1>个人页面</h1>
</el-header>
<el-main>
<el-row>
<el-col :span="8">
<el-card>
<img src="https://via.placeholder.com/300" alt="avatar" style="width: 100%">
<div style="text-align: center; margin-top: 10px;">
<h3>姓名:张三</h3>
<p>职业:前端开发工程师</p>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-card>
<h2>个人信息</h2>
<el-form>
<el-form-item label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="age"></el-input>
</el-form-item>
<el-form-item label="联系方式">
<el-input v-model="contact"></el-input>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</el-main>
<el-footer>
<p>版权所有 ©2021</p>
</el-footer>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三',
gender: 'male',
age: 25,
contact: '1234567890'
}
}
}
</script>
```
上述代码使用了ElementUI的`el-container`、`el-header`、`el-main`、`el-footer`、`el-row`、`el-col`、`el-card`、`el-form`、`el-form-item`、`el-input`、`el-radio-group`、`el-radio`等组件。其中,`el-container`为页面布局容器,`el-header`、`el-main`、`el-footer`为布局容器的三个部分,`el-row`、`el-col`用于实现网格布局,`el-card`为卡片组件,`el-form`、`el-form-item`、`el-input`、`el-radio-group`、`el-radio`用于实现表单组件。
阅读全文