当前位置：首页 > VUE

vue实现学生列表

2026-01-21 04:00:10VUE

实现学生列表的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>

vue实现学生列表