用vue写一个用户信息显示页面
时间: 2024-05-29 22:04:41 浏览: 22
以下是一个简单的用户信息显示页面的Vue代码示例:
<template>
<div>
<h1>用户信息</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.gender }}</td>
<td>{{ user.address }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: '张三', age: 20, gender: '男', address: '北京市海淀区' },
{ id: 2, name: '李四', age: 22, gender: '女', address: '上海市浦东新区' },
{ id: 3, name: '王五', age: 25, gender: '男', address: '深圳市南山区' },
{ id: 4, name: '赵六', age: 28, gender: '女', address: '广州市天河区' }
]
}
}
}
</script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
th {
background-color: #eee;
}
</style>
在这个示例中,我们使用了Vue的模板语法来渲染一个表格,其中包含了用户的姓名、年龄、性别和地址等信息。我们使用了v-for指令来遍历用户信息数组,并将每个用户信息渲染为一个表格行。通过这个示例,我们可以很容易地了解到Vue如何处理数据和渲染视图,并且可以根据自己的需要对其进行扩展和优化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)