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

【Vue】成绩案例

news 2025/9/16 21:55:11

文章目录

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

一、功能描述

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/9/16 2:42:18

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/9/15 0:18:51

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/9/14 10:39:35

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/20 12:09:50

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/9/9 10:12:45

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/9/13 17:44:12

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/9/9 14:56:55

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/9/8 8:54:14