如何用vue实现一个简单的录取成绩的表格

在Vue.js中创建一个简单的录取成绩表格，你可以按照以下步骤操作：

1. **初始化项目**：
使用Vue CLI创建一个新的项目，运行命令 `vue create student-score-table`。

2. **创建组件**：
- 创建一个名为`ScoreTable.vue`的新文件，这是你的主组件，用于展示表格。

   <template>
     <div class="score-table">
       <table border="1">
         <thead>
           <tr>
             <th>学号</th>
             <th>姓名</th>
             <th>语文</th>
             <th>数学</th>
             <th>总分</th>
           </tr>
         </thead>
         <tbody>
           <!-- 通过数据循环渲染每一行 -->
           <tr v-for="(student, index) in students" :key="index">
             <td>{{ student.id }}</td>
             <td>{{ student.name }}</td>
             <td>{{ student.chinese }}</td>
             <td>{{ student.math }}</td>
             <td>{{ calculateTotalScore(student) }}</td>
           </tr>
         </tbody>
       </table>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         students: [
           // 初始化一些学生数据
           { id: 1, name: '张三', chinese: 90, math: 85 },
           { id: 2, name: '李四', chinese: 88, math: 92 },
         ],
       };
     },
     methods: {
       calculateTotalScore(student) {
         return student.chinese + student.math;
       },
     },
   };
   </script>
   <style scoped>
     .score-table {
       width: 100%;
       border-collapse: collapse;
     }
   </style>

3. **在App.vue中引入并使用组件**：
将`ScoreTable`组件导入到`<template>`部分，并将其显示出来。

<template>
  <div id="app">
    <score-table></score-table>
  </div>
</template>

<script>
import ScoreTable from '@/components/ScoreTable.vue';

export default {
  components: {
    ScoreTable,
  },
};
</script>

现在你已经创建了一个基本的Vue组件，用于显示学生的录取成绩。这个表格会显示每个学生的ID、姓名、语文分数和数学分数，以及计算出的总分。每次添加或更新`students`数组的数据，表格都会自动刷新。