成绩单管理神器：Vue轻松构建多彩成绩单！

前端

2023-03-15 16:37:39

使用 Vue 构建成绩单：轻松且有趣

用 Vue 描绘成绩单

Vue.js 是一个渐进式 JavaScript 框架，以其轻量级、上手容易和丰富的组件生态而闻名。借助 Vue，我们可以轻松构建一个功能齐全、美观大方的成绩单。

指令的魅力：让及格和不及格分数一目了然

Vue 强大的指令功能使我们可以毫不费力地为及格和不及格分数着色。我们可以利用 v-if 和 v-else 指令判断分数是否及格，然后分别为及格分数和不及格分数添加不同的样式。

按钮的力量：一键排序，成绩一目了然

为了让成绩单更加直观，我们可以使用 Vue 中的按钮组件实现一键排序功能。当点击排序按钮时，我们可以利用 Vue 的计算属性和排序函数，将学生按总成绩从高到低或从低到高进行排序。

代码示例：亲自动手，体验 Vue 的魅力

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>数学</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.math }}</td>
          <td>{{ student.chinese }}</td>
          <td>{{ student.english }}</td>
          <td :class="{ 'good': student.total >= 60, 'bad': student.total < 60 }">{{ student.total }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="sortStudents">排序</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const students = ref([
      { id: 1, name: '张三', math: 90, chinese: 80, english: 70, total: 240 },
      { id: 2, name: '李四', math: 70, chinese: 80, english: 90, total: 240 },
      { id: 3, name: '王五', math: 60, chinese: 60, english: 60, total: 180 },
    ])

    const sortStudents = () => {
      students.value.sort((a, b) => b.total - a.total)
    }

    return {
      students,
      sortStudents,
    }
  },
}
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

.good {
  color: green;
}

.bad {
  color: red;
}
</style>