vue实现学生列表
实现学生列表的Vue方案
数据准备
在Vue组件中定义学生数据数组，通常放在data或setup中。示例使用Composition API：
const students = ref([
{ id: 1, name: '张三', age: 18, grade: '高一' },
{ id: 2, name: '李四', age: 17, grade: '高二' }
])列表渲染
使用v-for指令渲染学生列表，建议添加:key提升性能：
<ul>
<li v-for="student in students" :key="student.id">
{{ student.name }} - 年龄: {{ student.age }} 年级: {{ student.grade }}
</li>
</ul>表格形式展示
更规范的展示方式可采用表格布局：
<table class="student-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>年级</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students" :key="student.id">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.grade }}</td>
</tr>
</tbody>
</table>样式优化
添加基础CSS增强可读性：
.student-table {
width: 100%;
border-collapse: collapse;
}
.student-table th, .student-table td {
border: 1px solid #ddd;
padding: 8px;
}
.student-table tr:nth-child(even) {
background-color: #f2f2f2;
}动态数据加载
实际项目通常从API获取数据：
const fetchStudents = async () => {
try {
const response = await axios.get('/api/students')
students.value = response.data
} catch (error) {
console.error('获取学生列表失败:', error)
}
}
onMounted(fetchStudents)分页功能实现
处理大数据量的分页展示：
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
const paginatedStudents = computed(() => {
const start = (pagination.currentPage - 1) * pagination.pageSize
return students.value.slice(start, start + pagination.pageSize)
})完整组件示例
<template>
<div>
<table class="student-table">
<!-- 表格内容同上 -->
</table>
<div class="pagination">
<button @click="pagination.currentPage--" :disabled="pagination.currentPage === 1">上一页</button>
<span>第{{ pagination.currentPage }}页</span>
<button @click="pagination.currentPage++" :disabled="pagination.currentPage * pagination.pageSize >= pagination.total">下一页</button>
</div>
</div>
</template>
<script setup>
// 脚本内容同上
</script>
