vue学生管理系统个人信息展示页面代码

以下是一个简单的Vue学生管理系统个人信息展示页面代码示例：

<template>
  <div class="student-profile">
    <h2>{{ student.name }} 的个人信息</h2>
    <p>学号：{{ student.id }}</p>
    <p>性别：{{ student.gender }}</p>
    <p>年龄：{{ student.age }}</p>
    <p>班级：{{ student.class }}</p>
  </div>
</template>

<script>
export default {
  props: {
    student: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.student-profile {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

在上面的代码中，我们使用了Vue组件来展示学生的个人信息。使用props属性来传递学生数据，并在模板中使用{{}}插值表达式来显示学生的各项信息。同时使用了CSS样式来美化页面。

当我们在父组件中使用此组件时，需要传递一个名为student的对象，包含了学生的各项信息：

<template>
  <div>
    <student-profile :student="studentData" />
  </div>
</template>

<script>
import StudentProfile from './StudentProfile.vue'

export default {
  components: {
    StudentProfile
  },
  data() {
    return {
      studentData: {
        name: '张三',
        id: '123456',
        gender: '男',
        age: 18,
        class: '高三一班'
      }
    }
  }
}
</script>

以上代码中，我们在父组件中引入了StudentProfile组件，并把studentData对象传递给子组件。

当我们在浏览器中渲染此页面时，将会看到一个类似如下的学生信息展示页面：

张三 的个人信息
学号：123456
性别：男
年龄：18
班级：高三一班