当前位置： 首页 > news >正文

【Vue】成绩案例

news 2026/2/9 13:49:56

文章目录

  • 一、功能描述
  • 二、思路分析
    • 三、完整代码

一、功能描述

68204248931

1.渲染功能

2.删除功能

3.添加功能

4.统计总分，求平均分

二、思路分析

  1. 渲染功能 v-for :key v-bind:动态绑定class的样式（来回切换）

  2. 删除功能 v-on绑定事件， 阻止a标签的默认行为

  3. v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据（这两个也可以不加，不加的话就需要通过js去判断，所以加上这两个就是简化代码的）

    unshift 修改数组更新视图

  4. 使用计算属性computed， reduce求和 和 平均分的值

三、完整代码

<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 --><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 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><!-- 这里既要注册事件，又阻止了它跳 --><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分：{{ totalScore }}</span><span style="margin-left: 50px">平均分：{{ averageScore }}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目：</div><div class="input"><!-- 去掉首尾空格 --><input type="text" placeholder="请输入科目" v-model.trim="subject" /></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><!-- 需要数字类型的，如果number没有转成功，则得到的是字符串 --><input type="text" placeholder="请输入分数" v-model.number="score" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" 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: 62 },{ id: 7, subject: '数学', score: 89 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},computed: {totalScore() {return this.list.reduce((sum, item) => sum + item.score, 0)},averageScore() {// 防止除 0 情况if (this.list.length === 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}},methods: {del(id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add() {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script>
</body>

相关文章：

【Vue】成绩案例

文章目录 一、功能描述二、思路分析三、完整代码 一、功能描述 1.渲染功能 2.删除功能 3.添加功能 4.统计总分&#xff0c;求平均分 二、思路分析 渲染功能 v-for :key v-bind:动态绑定class的样式&#xff08;来回切换&#xff09; 删除功能 v-on绑定事件&#xff0c; 阻止…...

编程日记 2024/6/4 23:26:56

深度学习 - PyTorch简介

基础知识 1. PyTorch简介 PyTorch的特点和优势&#xff1a; 动态计算图、易用性、强大的社区支持、与NumPy兼容。 安装和环境配置&#xff1a; 安装和验证PyTorch&#xff1a; pip install torch torchvision验证安装&#xff1a; import torch print(torch.__version__)运行…...

编程日记 2024/6/4 23:25:54

MySQL：CRUD进阶(七千五百字)

文章目录 前置文章&#xff1a;&#x1f4d1;1. 数据库约束&#x1f324;️1.1 约束类型&#x1f324;️1.2 NULL约束&#x1f324;️1.3 Unique&#xff1a;唯一约束&#x1f324;️1.4 Default&#xff1a;默认值约束&#x1f324;️1.5 Primary key&#xff1a;主键约束&…...

编程日记 2024/6/4 23:24:53

与C共舞：让编译更顺滑（2）

1.6 Packed结构体 默认情况下，Zig中的所有结构体字段自然对齐到@alignOf(FieldType)（ABI大小），但没有定义布局。有时，您可能希望具有不符合您的C ABI的定义布局的结构体字段。packed结构体允许您对结构体字段进行极其精确的控制，允许您逐位放置字段。 在packed结构体内…...

编程日记 2024/6/4 23:23:52

Go 群发邮件Redis 实现邮件群发

一、安装 go get github.com/go-redis/redis/v8 go get gopkg.in/gomail.v2 二、使用"gopkg.in/gomail.v2"群发 package mainimport (gomail "gopkg.in/gomail.v2" )func main() {// 邮件内容m : gomail.NewMessage()m.SetHeader("From", &qu…...

编程日记 2024/6/4 23:22:51

夕小瑶：资本寒冬下的AI创业一年

几天前我和几位前大厂朋友约了个饭&#xff0c;朋友纷纷向我透露出一种纠结&#xff1a; “GPT-4o将催生一大波创业机会啊&#xff0c;想离职” “但是现在是资本寒冬啊” “好想像你一样勇敢啊” 说起来这两年的大厂打工人确实比较难&#xff0c;受经济大环境影响&#xff0…...

编程日记 2024/6/4 23:18:46

[JAVASE] 异常 与 SE阶段知识点补充

目录 一. 异常 1.1 什么是异常? 1.2 异常的本质 1.3 异常的分类 1.4 如何处理异常? 1.5 自定义异常 1.6 受查异常 与 非受查异常 与 Error(重要) 二. Object类 三. 内部类 2.1 什么是内部类? 2.2 内部类的分类 2.3 常用内部类的使用 四. 总结 一. 异常 1.1 什么是异…...

编程日记 2024/6/4 23:17:45

可视化数据科学平台在信贷领域应用系列一：数据探索

引言 信贷风险数据建模是金融机构在数据量日益庞杂的时代进行信贷业务风控的关键技术。它能够帮助机构更好地控制风险、减少违约损失&#xff0c;并提高业务效率。通过不断优化建模方法和利用建模工具&#xff0c;金融机构的风险控制能力得到了显著提升。 在本文中&#xff0c;…...

编程日记 2024/6/4 23:13:41

SpringBoot发送Gmail邮件

1. 登录Gmail Gmail网址 点击右上角“小齿轮”&#xff0c;然后点击"查看所有设置" 点击“转发和 POP/IMAP”&#xff0c;按图中设置&#xff0c;然后点击保存&#xff1a; 2. 启用两步验证(https://myaccount.google.com/security) 登录上述网址&#xff0c;找…...

编程日记 2024/6/4 23:11:39

【小海实习日记】金融-现货以及合约理解

在股票和金融市场中&#xff0c;“单项持仓”和“双向持仓”是两个常见的概念&#xff0c;主要用于描述投资者在市场中的头寸及其策略。 单项持仓&#xff08;单向持仓&#xff09; 单项持仓是指投资者在市场中只持有一种方向的头寸&#xff08;多头或空头&#xff09;&#…...

编程日记 2024/6/4 23:10:38

html 添加元素如何能提升速度

在 HTML 中&#xff0c;如果你需要频繁地添加大量元素&#xff0c;需要确保你的操作能够以最佳性能进行。以下是一些有助于提高添加元素速度的方法&#xff1a; 综上所述&#xff0c;通过使用文档片段、innerHTML、虚拟滚动以及避免频繁的重排和重绘&#xff0c;你可以提高在 H…...

编程日记 2024/6/4 23:08:36

人工智能大模型的进化之路：探索如何让它们变得更“聪明”

一、引言 在人工智能&#xff08;AI&#xff09;领域&#xff0c;大模型凭借其强大的处理能力和广泛的应用前景&#xff0c;已经成为研究的热点。然而&#xff0c;尽管这些模型在多个领域展现出了惊人的能力&#xff0c;但它们仍然面临着理解力、泛化能力和适应性等方面的挑战…...

编程日记 2024/6/4 23:07:36

【设计模式深度剖析】【6】【结构型】【外观模式】| 以电脑开关按钮为例，并结合微服务架构的API网关加深理解

&#x1f448;️上一篇:桥接模式 | 下一篇:享元模式&#x1f449;️ 设计模式-专栏&#x1f448;️ 目 录 外观模式&#xff08;Facade Pattern&#xff09;定义英文原文直译如何理解呢&#xff1f;字面理解代码实现中的理解生活案例&#xff1a;操作多功能料理机典型案例…...

编程日记 2024/6/4 23:06:34

2024拼多多 最新理论+实战干货，从入门到精通全链路多角度学习-7节课

基于最新规则理论结合实际的干货 课程内容&#xff1a; 01 2024年多多防比价新规则破局理论课与实操课.mp4 02 24年多多强付费第二节课基础内功.mp4 03 24年多多强付费第三节课直通车实操 .mp4 04 24年多多强付费第一节课市场定价格段,mp4 05 24年多多自然流第一节课市场…...

编程日记 2024/6/4 23:05:33

在Three.js中实现模型点击高亮：整合EffectComposer与OutlinePass的终极指南

效果【后期实现鼠标点击选中轮廓后给出一个弹窗显示相应的模型信息】 标签指示线参考我的上一篇文章 引言 Three.js不仅让WebGL的3D图形编程变得简单易懂&#xff0c;还通过其强大的扩展库支持丰富的后期处理效果&#xff0c;为3D场景增添无限魅力。本篇文章将引导您深入了…...

编程日记 2024/6/4 23:01:29

Webrtc支持HEVC之FFMPEG支持HEVC编解码(一)

一、前言 Webrtc使用的FFMPEG(webrtc\src\third_party\ffmpeg)和官方的不太一样，使用GN编译，各个平台使用了不一样的配置文件 以Windows为例，Chrome浏览器也类似 二、修改配置文件 windows：chromium\config\Chrome\win\x64 其他平台: chromium\config\Chrome\YOUR_SYS…...

编程日记 2024/6/4 22:59:27

高校实验室危险化学品及重大危险源安全管理系统

高校实验室危险化学品及重大危险源安全管理的重要性&#xff1a; 保障师生安全&#xff1a;通过严格管理&#xff0c;可以有效地降低这些风险&#xff0c;确保师生在实验室内的安全。 确保实验教学质量&#xff1a;良好的危化品管理能够确保实验材料的准确性和可靠性&#xff0…...

编程日记 2024/6/4 22:58:25

【Godot4自学手册】第四十一节背包系统（一）UI设置

各位同学&#xff0c;好久没有更新笔记了&#xff0c;今天开始&#xff0c;我准备自学背包系统。今天先学习下UI界面设置。 一、新建场景和结点 1.新建Node2D场景&#xff0c;命名为Inventory&#xff0c;保存到Scenes目录下&#xff0c;inventory.tscn。 2.新建TextureRect子…...

编程日记 2024/6/4 22:56:23

JS继承的方式

目录 原型链继承构造函数继承组合继承寄生组合继承ES6 Class 继承原型链继承 原理： 通过将子类的原型（prototype）设置为父类的一个实例，使得子类实例能够沿着原型链访问到父类的属性和方法。 function Parent() {this.parentProperty...

编程日记 2024/6/4 22:55:22

拓展虚拟世界边界，云手机可以做到吗

虚拟世界&#xff0c;AI&#xff0c;VR等词汇是21世纪最为流行的词汇&#xff0c;在科技背后&#xff0c;这些词汇的影响变得越来越大&#xff0c;已经走进了人们的世界&#xff0c;比如之前APPLE发布的vision pro&#xff0c;使人们能够更加身临其境的体验到原生os系统&#x…...

编程日记 2024/6/4 22:53:19

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/7 0:37:40

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48