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

【Vue】成绩案例

news 2025/11/6 3:10:37

文章目录

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

一、功能描述

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

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/10/31 18:32:29

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/10/26 7:40:30

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/10/31 16:04:40

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/11/2 20:33:45

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/10/26 12:10:39

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/11/4 0:47:29

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

编程新知 2025/9/30 4:51:15

GAN模式奔溃的探讨论文综述（一）

简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...

编程新知 2025/10/31 5:23:50