<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

<!-- 1. 数组：最常用 -->
<li v-for="item in students" :key="item.id">{{ item.name }}</li>

<!-- 2. 带下标 -->
<li v-for="(item, index) in students" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>

<!-- 3. 对象：按“值、键、下标”取 -->
<div v-for="(value, key, index) in info" :key="key">{{ key }} = {{ value }}</div>

<!-- 不推荐：Vue 3 里 v-if 的优先级高于 v-for，会报"找不到变量" -->
<li v-for="item in list" v-if="item.done" :key="item.id">...</li>

<!-- 推荐：先算好要显示的数据，再循环 -->
<li v-for="item in doneList" :key="item.id">...</li>

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

const filter = ref('all')                       // 当前筛选条件
const students = ref([ /* ...后端给的数据... */ ])

// 算出“真正要显示的数组”，模板只管循环它
const visibleList = computed(() => {
  if (filter.value === 'done') return students.value.filter(s => s.done)
  if (filter.value === 'todo') return students.value.filter(s => !s.done)
  return students.value
})
</script>

<template>
  <p v-if="visibleList.length === 0">暂无记录</p>
  <div v-for="item in visibleList" :key="item.id">{{ item.name }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElCard, ElRadioGroup, ElRadioButton, ElSelect, ElOption, ElTag, ElEmpty, ElAlert, ElButton, ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'

const students = ref([
  { id: 1, name: '张三', cls: '计算机1班', done: true, score: 92, submitAt: '09-01 20:15' },
  { id: 2, name: '李四', cls: '计算机1班', done: false, score: null, submitAt: '' },
  { id: 3, name: '王五', cls: '计算机2班', done: true, score: 78, submitAt: '09-02 10:03' },
  { id: 4, name: '赵六', cls: '计算机2班', done: true, score: 45, submitAt: '09-02 22:40' },
  { id: 5, name: '钱七', cls: '计算机3班', done: false, score: null, submitAt: '' }
])

const filter = ref('all')      // all | done | todo
const cls = ref('all')         // all | 班级名

const visibleList = computed(() => {
  let list = students.value
  if (filter.value === 'done') list = list.filter(s => s.done)
  if (filter.value === 'todo') list = list.filter(s => !s.done)
  if (cls.value !== 'all') list = list.filter(s => s.cls === cls.value)
  return list
})

const stat = computed(() => {
  const done = students.value.filter(s => s.done).length
  return { total: students.value.length, done, todo: students.value.length - done }
})

function toggleDone(id) {
  const s = students.value.find(x => x.id === id)
  if (s) s.done = !s.done
}

function gradeTag(score) {
  if (score === null) return 'info'
  if (score >= 85) return 'success'
  if (score >= 60) return 'warning'
  return 'danger'
}
</script>

<template>
  <div class="page">
    <h1 class="title">作业提交情况</h1>

    <el-card class="block">
      <div class="bar">
        <el-radio-group v-model="filter">
          <el-radio-button label="all" value="all">全部</el-radio-button>
          <el-radio-button label="done" value="done">已提交</el-radio-button>
          <el-radio-button label="todo" value="todo">未提交</el-radio-button>
        </el-radio-group>

        <el-select v-model="cls" style="width: 160px">
          <el-option label="全部班级" value="all" />
          <el-option label="计算机1班" value="计算机1班" />
          <el-option label="计算机2班" value="计算机2班" />
          <el-option label="计算机3班" value="计算机3班" />
        </el-select>
      </div>
      <p class="stat">
        共 {{ stat.total }} 人，已提交 {{ stat.done }} 人，未提交 {{ stat.todo }} 人
      </p>
    </el-card>

    <el-empty v-if="visibleList.length === 0" description="没有符合条件的记录" />

    <div v-else class="grid">
      <el-card v-for="item in visibleList" :key="item.id" class="stu" shadow="hover">
        <div class="row">
          <span class="name">{{ item.name }}</span>
          <el-tag v-if="item.done" type="success" size="small">已提交</el-tag>
          <el-tag v-else type="info" size="small">未提交</el-tag>
        </div>
        <p class="cls">{{ item.cls }}</p>
        <template v-if="item.done">
          <p>得分：<el-tag :type="gradeTag(item.score)" size="small">{{ item.score }}</el-tag></p>
          <p class="time">提交于 {{ item.submitAt }}</p>
        </template>
        <p v-else class="time">尚未提交，请尽快补交</p>
        <el-button size="small" @click="toggleDone(item.id)">切换状态</el-button>
      </el-card>
    </div>

    <el-alert
      title="切换上方筛选，观察卡片数量；把所有卡片都切成“已提交”，再切到“未提交”看空状态。"
      type="info" :closable="false" show-icon class="tip"
    />
  </div>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 1000px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 18px; }
.bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stat { margin: 12px 0 0; color: #606266; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stu { min-height: 180px; }
.row { display: flex; justify-content: space-between; align-items: center; }
.name { font-weight: 600; color: #303133; }
.cls { color: #909399; font-size: 13px; margin: 6px 0 10px; }
.time { color: #909399; font-size: 12px; }
.tip { margin-top: 18px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
</style>

<el-tag v-if="item.done" type="success">已提交</el-tag>
<el-tag v-else type="info">未提交</el-tag>

<template v-if="item.done">
  <p>得分：...</p>
  <p>提交于 ...</p>
</template>

<script setup>
import { ref } from 'vue'
const logged = ref(false)
</script>

<template>
  <p v-if="logged">欢迎回来</p>
  <p v-else>请先登录</p>
  <button @click="logged = !logged">切换</button>
</template>

<p v-show="logged">欢迎回来</p>

<script setup>
import { ref } from 'vue'
const names = ref(['张三', '李四', '王五'])
</script>

<template>
  <ul>
    <li v-for="(n, i) in names" :key="n">{{ i + 1 }}. {{ n }}</li>
  </ul>
</template>

<input v-for="(n, i) in names" :key="i" v-model="names[i]" />
<button @click="names.splice(1, 0, '新同学')">在第二位插入一个人</button>