vue学习日记08：综合案例成绩案例

已于 2024-03-20 11:35:53 修改
阅读量657 收藏 15
点赞数
分类专栏： vue入门学习 文章标签： 学习 vue.js 前端 vue
于 2024-03-06 16:01:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinfanfff/article/details/136506062
版权

1.准备代码

index.less

.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  .table {
    flex: 4;
    table {
      width: 100%;
      border-spacing: 0;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      th {
        background: #f5f5f5;
      }
      tr:hover td {
        background: #f5f5f5;
      }
      td,
      th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
        &.red {
          color: red;
        }
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .form {
    flex: 1;
    padding: 20px;
    .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }
    .form-item .input {
      flex: 1;
    }
    .form-item input,
    .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .form-item input::placeholder {
      color: #666;
    }
    .form-item .cancel,
    .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }
    .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  }
}

index.css

.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
}
.score-case .table {
  flex: 4;
}
.score-case .table table {
  width: 100%;
  border-spacing: 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.score-case .table table th {
  background: #f5f5f5;
}
.score-case .table table tr:hover td {
  background: #f5f5f5;
}
.score-case .table table td,
.score-case .table table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}
.score-case .table table td.red,
.score-case .table table th.red {
  color: red;
}
.score-case .table .none {
  height: 100px;
  line-height: 100px;
  color: #999;
}
.score-case .form {
  flex: 1;
  padding: 20px;
}
.score-case .form .form-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.score-case .form .form-item .label {
  width: 60px;
  text-align: right;
  font-size: 14px;
}
.score-case .form .form-item .input {
  flex: 1;
}
.score-case .form .form-item input,
.score-case .form .form-item select {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  color: #666;
}
.score-case .form .form-item input::placeholder {
  color: #666;
}
.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 10px;
  font-size: 12px;
  background: #ccc;
}
.score-case .form .form-item .submit {
  border-color: #069;
  background: #069;
  color: #fff;
}

案例静态模版代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/index.css" />
    <title>Document</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>
            <tr>
              <td>1</td>
              <td>语文</td>
              <td class="red">46</td>
              <td><a href="#">删除</a></td>
            </tr>
            <tr>
              <td>2</td>
              <td>英语</td>
              <td>80</td>
              <td><a href="#">删除</a></td>
            </tr>
            <tr>
              <td>3</td>
              <td>数学</td>
              <td>100</td>
              <td><a href="#">删除</a></td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分：246</span>
                <span style="margin-left: 50px">平均分：79</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="label">科目：</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入科目"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">分数：</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入分数"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label"></div>
          <div class="input">
            <button class="submit" >添加</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          list: [
            { id: 1, subject: '语文', score: 20 },
            { id: 7, subject: '数学', score: 99 },
            { id: 12, subject: '英语', score: 70 },
          ],
          subject: '',
          score: ''
        }
      })
    </script>
  </body>
</html>

2.开始练习

需求说明：

1.渲染功能 2.删除功能 3.添加功能 4.统计总分，求平均分

1.渲染功能

（1）对tbody进行条件渲染

模版如图 成绩和暂无数据应该二显示一个

使用v-if和v-else 可以把元素销毁 不用v-show 

 （2）用v-for列表渲染，  :class标红控制

2.删除功能

 

3.添加功能

如果输入的不正确弹出提示 添加后情况输入框的内容

4.统计总分，求平均分

 当没有数据的时候显示会不符合，0除以0还保留两位小数不合理所有加上添加判断

总结

yinfanfff
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习日记17：scoped样式冲突
03-21
vue学习日记17：scoped样式冲突
vue学习日记10:综合案例-购物车
yinfanfff的博客
03-19 298
（2）展示 减到1就不能再减，点击删除直接删除 这里写三元表达式也可以 三元表达式是一种在许多编程语言中常见的条件表达式，它由三个操作数组成：一个条件表达式、一个真值表达式和一个假值表达式。其一般形式为： 如果写成if...else 三元写法 被勾选的被计算 5.持久化本地如果用户对其操作之后 没有持久化刷新后就会成问题（1）代码 如果没有 || （defaultArr）清除缓存后就会null崩溃 ，加上之后就会默认回到初试页面了（2）展示
前端学习日记Vue：v-model
weixin_42585386的博客
10-12 126
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>v-model 绑...
vue学习日记16：拆分模块组件
yinfanfff的博客
03-25 444
把准备的src复制到vue-demo1下面 然后npm run serve 即可情况app.vue里面的内容 别怕上面有备份。
springboot学习日记(八):Vue(全)
wangmyang0909的博客
12-01 982
是为前端开发者服务的通用 IDE，或者称为编辑器。Node.js 是一个开源、跨平台的 JavaScript 运行时环境。下载官网：https://www.dcloud.io/hbuilderx.html。记得按Ctrl+s保存,这样,这个项目中的每一个vue文件都可以配置网络访问了。源码直接去官网复制,的形式一般是 Element-Plus的。下载官网：https://nodejs.org/en。里面是将.vue - > html css js。网络请求框架加载完成。
vue学习日记19：记事本-组件版
03-26
记事本组件版本
vue学习日记18：data函数，父传子，子传父
03-21
data函数，父传子，子传父三个的代码
Vue学习笔记_综合案例.zip
06-19
文件里包含综合案例代码和数据库文件、学习笔记、vuejs2中文手册，W3School全套教程。 配套博客 https://blog.csdn.net/H200102/article/details/106535213
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
FME学习之旅---day27
summer_corner的博客
05-17 213
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1120
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
学习kong官方文档
好好学习日记
05-17 285
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
C语言查漏补缺学习【精简版】
qq_49288362的博客
05-18 634
逗号的组合关系是自左向右，所以左边的表达式会先计算，而右边的表达式的值就留下来作为逗号运算的结果。枚举类型名字通常并不真的使用，要用的是在大括号里的名字，因为它们就是常量符合，它们的类型是int,值则一次从0到n。当要传递的参数的类型比地址大的时候，这是常用的手段：既能用比较少的字节数传递值给参数，又能避免函数对外面的变量的修改。当需要一些可以排列起来的常量值时，定义枚举的意义就是给了这些常量的值的名字。16.*：是一个单目运算符，用来访问指针的值所表示的地址上的变量。
RustGUI学习（iced/iced_aw）之扩展小部件（十九）：如何使用context_menu部件来创建右击菜单？
用沸腾的热血，支付我们的人生吧！
05-15 77
本专栏是学习Rust的GUI库iced的合集，将介绍iced涉及的各个小部件分别介绍，最后会汇总为一个总的程序。iced是RustGUI中比较强大的一个，目前处于发展中（即版本可能会改变），本专栏基于版本0.12.1.
DB类的学习
2301_77523055的博客
05-15 369
"不返回结果集" 意味着执行 SQL 语句后，你不会得到一个可以逐行读取的数据集。相反，你可能会得到一个表示受影响的行数的整数，或者只是一个表示命令是否成功执行的确认。
llama-factory学习个人记录
最新发布
qq_55736201的博客
05-22 618
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
Android OpenMAX（八）如何学习OMXNodeInstance
青山渺渺
05-15 238
OMXNodeInstance学习技巧
vue的成绩查询案例
06-01
以下是一个简单的 Vue 成绩查询案例： HTML 代码： ```html <div id="app"> <form @submit.prevent="submitForm"> <label for="name">姓名：</label> <input type="text" id="name" v-model="name"> <label for="math">数学：</label> <input type="number" id="math" v-model.number="mathScore"> <label for="english">英语：</label> <input type="number" id="english" v-model.number="englishScore"> <button type="submit">查询</button> </form> <div v-if="showResult"> {{ name }} 的成绩如下：<br> 数学：{{ mathScore }}<br> 英语：{{ englishScore }} </div> </div> ``` JavaScript 代码： ```js new Vue({ el: '#app', data: { name: '', mathScore: 0, englishScore: 0, showResult: false }, methods: { submitForm() { // 在这里发送请求查询成绩 // 假设查询成功并返回以下数据 const data = { mathScore: 90, englishScore: 80 }; this.mathScore = data.mathScore; this.englishScore = data.englishScore; this.showResult = true; } } }); ``` 在这个案例中，我们使用了 Vue 的双向数据绑定功能，同时使用了 `v-if` 来控制是否显示成绩查询结果。在表单提交时，我们假设发送了请求并成功返回了成绩数据，然后在 Vue 实例中更新数据并显示查询结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值