Vue 3 computed 怎么实现考试成绩等级的自动划分-Vue.js-PHP中文网

Vue 3 的 computed 适合自动划分考试成绩等级：基础用法对单分数返回等级，进阶用法批量为学生成绩列表添加 level 字段，并支持基于等级的过滤与统计。

vue 3 computed 怎么实现考试成绩等级的自动划分

Vue 3 的 computed 非常适合实现考试成绩等级的自动划分——它能响应式监听分数变化，只在分数更新时重新计算等级，且结果自动缓存，避免重复执行逻辑。

基础写法：根据单个分数返回等级

适用于学生详情页、成绩卡片等展示单科分数等级的场景：

用 ref 存储原始分数（如 score = ref(85)）
用 computed 封装判断逻辑，直接返回字符串等级
模板中直接使用 {{ grade }}，无需 .value（Vue 自动解包）

示例代码：

进阶用法：对学生成绩列表批量计算等级

适用于成绩表格、统计看板等需要为多条记录统一生成等级的场景：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

用 ref 或 reactive 管理成绩数组（如 students = ref([...])）
computed 返回一个新数组，每个元素包含原始数据 + 计算出的 level 字段
依赖自动追踪整个数组及每个对象的 score 属性

示例：

const students = ref([
  { id: 1, name: '张三', score: 92 },
  { id: 2, name: '李四', score: 76 },
  { id: 3, name: '王五', score: 58 }
])
const studentsWithLevel = computed(() =>
  students.value.map(s => ({
    ...s,
    level: s.score >= 90 ? '优秀' :
        s.score >= 75 ? '良好' :
        s.score >= 60 ? '合格' : '不合格'
  }))
)

结合过滤与排序：动态筛选某等级学生

比如“只显示‘优秀’学生”或“按等级分组统计”，可再套一层 computed：

复用已有的 studentsWithLevel 作为数据源
新增 excellentStudents 计算属性，内部用 .filter() 提取
同样具备响应式和缓存特性，不会因模板多次调用而重复遍历

示例：

const excellentStudents = computed(() =>
  studentsWithLevel.value.filter(s => s.level === '优秀')
)
const levelCount = computed(() => {
  const count = { 优秀: 0, 良好: 0, 合格: 0, 不合格: 0 }
  studentsWithLevel.value.forEach(s => count[s.level]++)
  return count
})