Vue2 渲染、添加、删除、计算综合案例

最新推荐文章于 2025-05-20 14:26:04 发布

原创

最新推荐文章于 2025-05-20 14:26:04 发布 · 423 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/index.css" />
    <title>成绩案例</title>
</head>
<body>
    <div id="app" class="score-case">
        <div class="table">
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody v-if="list.length > 0">
              <tr v-for="(item,index) in list"  :key="item.id">
                <td>{
  
  {index+1}}</td>
                <td>{
  
  {item.subject}}</td>
                <!-- 设置分数小于60的情况下，动态绑定class，实现颜色变红 --&