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

【Vue】成绩案例

news 2026/4/2 17:36:54

文章目录

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

一、功能描述

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

如何用CodeMaker将Java/Scala开发效率提升300%？5个核心技巧带你掌握智能代码生成

如何用CodeMaker将Java/Scala开发效率提升300%&#xff1f;5个核心技巧带你掌握智能代码生成 【免费下载链接】CodeMaker A idea-plugin for Java/Scala, support custom code template. 项目地址: https://gitcode.com/gh_mirrors/co/CodeMaker 作为Java/Scala开发者&a…...

编程新知 2026/4/2 17:15:08

OpenClaw网页前端开发与优化全流程指南

OpenClaw网页前端开发与优化全流程指南 &#x1f310; 核心价值&#xff1a;OpenClaw实现"需求→设计→代码→优化→部署"全流程自动化&#xff0c;开发效率提升600%&#xff0c;页面加载速度提升300%&#xff0c;SEO评分提升85%&#xff0c;完全兼容React/Vue/Angul…...

编程新知 2026/4/2 15:02:31

PCB开窗技术：提升电流承载能力的关键工艺

1. PCB开窗技术解析&#xff1a;从概念到应用在PCB设计领域&#xff0c;"开窗"这个术语经常被经验丰富的工程师挂在嘴边&#xff0c;但对于刚入行的新手来说&#xff0c;这个看似简单的操作背后却蕴含着不少设计门道。作为一名有十年硬件设计经验的工程师&#xff0c…...

编程新知 2026/4/2 14:34:07

3个突破壁垒方法：网盘直链下载助手如何让文件获取效率提升5倍

3个突破壁垒方法&#xff1a;网盘直链下载助手如何让文件获取效率提升5倍 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘…...

编程新知 2026/4/2 13:08:19

Marked.js 终极指南：为什么这是现代 Web 开发中最快的 Markdown 解析器？

Marked.js 终极指南&#xff1a;为什么这是现代 Web 开发中最快的 Markdown 解析器&#xff1f; 【免费下载链接】marked A markdown parser and compiler. Built for speed. 项目地址: https://gitcode.com/gh_mirrors/ma/marked 在当今内容驱动的 Web 开发世界中&…...

编程新知 2026/4/2 12:15:38

21.【RTL_Synthesis】Analyzing Synthesis Results（综合结果分析）

&#x1f50d; 分析综合结果&#xff1a;从数字到洞察 我们已经学会了用 Yosys 把 RTL 综合成门级网表&#xff0c;也知道了如何用脚本批量处理不同工艺角。但综合工具跑完之后&#xff0c;我们得到了一堆数字&#xff1a;多少门、多少触发器、面积多大……这些数字到底意味着什…...

编程新知 2026/4/2 11:40:53

想了解欧拉好猫参数？这篇文章给你详细答案！

在当今新能源汽车市场蓬勃发展的背景下&#xff0c;欧拉好猫凭借其独特的魅力&#xff0c;在众多车型中脱颖而出&#xff0c;吸引了众多消费者的目光。以下将对欧拉好猫的相关参数及技术亮点进行详细解析。外观设计与尺寸欧拉好猫采用复古未来主义的设计风格&#xff0c;圆润的…...

编程新知 2026/4/2 11:00:24

Phi-3-mini-4k-instruct-gguf免配置环境：开箱即用的Web UI，开发者5分钟上手

Phi-3-mini-4k-instruct-gguf免配置环境&#xff1a;开箱即用的Web UI&#xff0c;开发者5分钟上手 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理问答、文本改写、摘要整理和简短创…...

编程新知 2026/4/2 10:58:21

终极指南：DXVK如何彻底改变Linux游戏体验的5大关键优势

终极指南&#xff1a;DXVK如何彻底改变Linux游戏体验的5大关键优势 【免费下载链接】dxvk Vulkan-based implementation of D3D8, 9, 10 and 11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk 在Linux上畅玩Windows独占3D游戏曾经是天方夜谭&…...

编程新知 2026/4/2 9:29:05

Windows Cleaner完全指南：如何快速解决C盘爆红和系统卡顿问题

Windows Cleaner完全指南&#xff1a;如何快速解决C盘爆红和系统卡顿问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统设…...

编程新知 2026/4/2 9:14:51