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

Vue实现成绩增删案例

news 来源：原创 2025/7/17 3:48:04

Vue实现成绩增删案例

案例功能需求
案例实现
- 实现思路
- 完整代码
- 功能演示
案例小结

案例功能需求

1.通过vue渲染数据，将成绩的相关信息显示出来（学号，学科，成绩）
2.能够增加相关的成绩信息
3.能够删除相关的成绩信息
4.能够自动统计总分以及平均分
5.在没有数据时，显示特定内容

案例实现

实现思路

数据渲染：
数据通过table表格来展示
通过v-for指令，将存储在数组中的数据嵌入td

 <tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.score}}</td><td><a href=""  @click.prevent="del(item.id)">删除</a></td></tr>

自动统计：
总分：通过computed计算属性，利用reduce()函数,对数组的成绩进行累加计算并返回累加结果

return this.list.reduce((sum, item) => sum + Number(item.score), 0)

平均分：
调用之前设计进行累加的计算方法，将获取的值除以信息总条数，获取平均分，并将其返回

return (this.show01 /this.list.length).toFixed(2)

增加信息：

对输入框添加v-model指令，进行数据的双向绑定，将输入的数据通过push()，放入存储数据的数组中

this.list.push({id:this.t1,subject:this.t2,score:this.t3})

删除信息：

创建方法，传入要删除信息的id（学号），遍历数组，将含有该id的信息从数组中删除

for(let i=0;i<this.list.length;i++){if(this.list[i].id==ID){this.list.splice(i,1)return;}}

显示特定内容：
通过v-if指令，当存储数据的数组长度为0时，将其设为true，则能将内容展示出来

<tbody v-if="ifshow<=0? true:false"></thbody>

完整代码

<template><table><thead><tr><th>学号</th><th>学科</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="ifshow>0? true:false"><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.score}}</td><td><a href=""  @click.prevent="del(item.id)">删除</a></td></tr><tr class="tr_01"><td colspan="2" class="td1">总分：{{show01}}</td><td colspan="2" class="td2">平均分：{{ave}}</td></tr></tbody><tbody v-if="ifshow<=0? true:false"><tr><td colspan="4" class="td_01">数据为空</td></tr></tbody></table><div class="div_01"><label :class="{red :tt1,green: tt2}">{{show02}}</label><br><span><label for="">学号：</label><input type="text" name="" id="" v-model="t1"></span><br><span><label for="">学科：</label><input type="text" name="" id=""  v-model="t2"></span><br><span><label for="">成绩：</label><input type="text" name="" id=""  v-model="t3"></span><br><input type="submit" value="添加"  @click="add"></div>
</template><script>console.log(new Date())export default {data() {return {list:[{id:101,subject:'语文',score:99.9}],t1:"",t2:"",t3:"",show02:"",tt1:"",tt2:""}},methods:{del(ID){for(let i=0;i<this.list.length;i++){if(this.list[i].id==ID){this.list.splice(i,1)return;}}},add(){if(this.t1!=""&&this.t2!=""&&this.t3!=""){this.list.push({id:this.t1,subject:this.t2,score:this.t3})this.show02='正确'this.tt2=truethis.tt1=false}else{this.show02='输入内容不全'this.tt2=falsethis.tt1=true}this.t1=this.t2=this.t3=""console.log(this.tt1)console.log(this.tt2)},},computed:{ifshow(){return this.list.length},show01(){return this.list.reduce((sum, item) => sum + Number(item.score), 0)},ave() {if (this.list.length === 0) {return 0}else{return (this.show01 / this.list.length).toFixed(2)}},}}
</script><style>*{margin: 0;padding: 0;}table{border: 1px solid black;/* 合并 */border-collapse: collapse;margin: 5px;}th,td{border: 1px solid black;width: 100px;height: 50px;text-align: center;}.td_01{height: 130px;}.tr_01 td{border: none;}.td1{text-align: right;padding-right: 10px;}.td2{text-align: left;padding-left: 10px;}.div_01{position: fixed;left: 500px;top: 30px;}label{font-size: 18px;}input[type="text"]{width: 175px;height: 25px;}input[type="submit"]{display: block;margin: 5px auto;width: 47px;height: 27px;}.red{margin-left: 50px;color: red;}.green{margin-left: 50px;color: green;}
</style>

功能演示

初始页面

在这里插入图片描述
增添信息

在这里插入图片描述

删除信息
在这里插入图片描述

无数据

在这里插入图片描述

案例小结

1.要在不同的情况下，显示不同的页面，可以通过v-if或v-show指令实现。v-if只有在true时，才会进行页面的渲染，而v-show无论什么情况都会进行页面的渲染。

2.v-bind指令，可以用来改变属性值（class、href、style），通过数组或对象来存放属性值。以class为例，对象{类名，布尔型（true,false）}，当为true时，该类才会添加到元素中。数组[类名，类名]，适合用来一次性添加大量类名或删除。

3.computed属性通常是用来返回值，也就是可读的。在进行调试时，若给定义的计算属性赋值，会发现，值不会改变。若需要一个可读写的计算属性，可以通过定义get、set进行实现。

Vue实现成绩增删案例

Vue实现成绩增删案例案例功能需求案例实现实现思路完整代码功能演示案例小结案例功能需求 1.通过vue渲染数据，将成绩的相关信息显示出来（学号，学科，成绩） 2.能够增加相关的成绩信息 3.能够删除相关的成绩信息 4.能…...

编程日记 2025/7/17 3:48:04

开源项目实战学习之YOLO11：ultralytics-cfg-models-rtdetr（十一）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 1. __init__.py2. model.py3. predict.py4. train.py5. val.py ultralytics-cfg-models-rtdetr 主要与 Ultralytics 库中 RTDETR（实时目标检测模型，R…...

编程日记 2025/7/10 21:55:33

【Bootstrap V4系列】学习入门教程之组件-按钮（Buttons）

Bootstrap V4系列学习入门教程之组件-按钮（Buttons） 按钮（Buttons）一、示例二、可用作按钮的 HTML 标签三、带轮廓线的按钮四、按钮的尺寸五、活动状态六、禁用状态七、按钮插件切换状态Checkbox and radio buttons &#xff08…...

编程日记 2025/7/17 3:31:33

【java八股文】深入浅出synchronized优化原理

🔍 开发者资源导航 🔍🏷️ 博客主页： 个人主页📚 专栏订阅： JavaEE全栈专栏 synchronized优化原理 synchronized即使悲观锁也是乐观锁，拥有自适应性。 jvm内部会统计每个锁的竞争激烈程度&…...

编程日记 2025/6/29 5:23:56

裴蜀定理及其证明

裴蜀定理对于所有整数 a a a和 b b b，存在： g c d ( a , b ) a x b y gcd(a,b)axby gcd(a,b)axby 并且 a x b y axby axby一定是 g c d ( a , b ) gcd(a,b) gcd(a,b)的倍数。证明定义一个集合： { a x b y ｜ a x b y &…...

编程日记 2025/7/17 3:40:44

单片机嵌入式CAN库

kw_can库说明本库是针对CAN类型数据的收发设计： 主要应用于大数据量（数据处理速度高于缓存CAN_RTX_FIFO_SIZE大小）接收不丢包可快速进出接收中断可跨线程调用发送接口。本库开源连接地址：gitee连接实现思路本库采用C语言…...

编程日记 2025/7/17 3:36:48

基于 JSP 和 Servlet 的数字信息分析小应用

Java Web 实验：基于 JSP 和 Servlet 的数字信息分析小应用一、实验目的实现一个简单的 Java Web 应用，通过 JSP 表单收集用户输入的文本信息，提交至 Servlet 分析其中是否包含数字，并返回结果。掌握 JSP 与 Servlet 的协同工作…...

编程日记 2025/6/29 7:35:06

从零认识阿里云OSS：云原生对象存储的核心价值

引言在云计算时代，海量数据的存储与管理成为企业数字化转型的关键命题。阿里云对象存储OSS（Object Storage Service）作为云原生的分布式存储服务，凭借其独特的架构设计和丰富的功能矩阵，正在成为企业构建数据湖、管理…...

编程日记 2025/6/29 5:21:50

2025年深圳杯数学建模（东三省）B题【颜色转换】原论文讲解

大家好呀，从发布赛题一直到现在，总算完成了2025年深圳杯数学建模（东三省）B题【颜色转换】完整的成品论文。给大家看一下目录吧： 目录摘要： 一、问题重述二．问题分析 2.1问题一 2.2问…...

编程日记 2025/6/29 5:55:59

开源语音合成和转换项目

开源语音合成和转换项目大模型出来以后，语音合成和转换方面也有了很大的变化。在语音转换文字方面有Whisper、SeamlessM4T等；在语音合成方面有ChatTTS（中英文）、Orpheus TTS（仅仅支持英文）、Amphion&…...

编程日记 2025/7/17 3:29:07

考研408《计算机组成原理》复习笔记，第二章计算机性能

一、计算机各项性能指标 1、计算机系统整体的性能指标： 从宏观上看，整个计算机是由软件硬件共同性能决定的，但是【最主要的决定性的影响】还是来自于【硬件】因为计算机组成原理主要讲【硬件】，那么我们也仅考虑【硬件性能】 2…...

编程日记 2025/7/17 3:32:54

智能决策支持系统的基本概念与理论体系

决策支持系统是管理科学的一个分支，原本与人工智能属于不同的学科范畴，但自20世纪80年代以来，由于专家系统在许多方面取得了成功，于是人们开始考虑把人工智能技术用于计算机管理中来。在用计算机所进行的各种管理中，如…...

编程日记 2025/7/17 3:42:58

什么是运算符重载

运算符重载，就是对已有的运算符重新进行定义，赋予其另一种功能，以适应不同的数据类型，本质上是函数重载。以下为您详细介绍： 实现原理与方式 - 原理：把指定的运算表达式转化为对运算符函数的调用&#xff0…...

编程日记 2025/7/8 6:08:57

自定义Dockerfile，发布springboot项目

(1) 上传jar包把hello项目打成一个可执行的jar包 hello-1.0-SNAPSHOT.jar，把这个jar包上传到linux中 (2) 创建文件，文件名my_hello（就是一个Dockerfile），内容如下 #1.定义父镜像(定义当前工程依赖的环境)：…...

编程日记 2025/6/29 7:51:09

什么是多租户系统

随着云计算和 SaaS（Software as a Service）模式的普及，多租户架构（Multi-Tenant Architecture）成为 SaaS 产品设计中的核心模式之一。多租户架构允许多个用户（租户）共享同一套基础设施和应用&am…...

编程日记 2025/6/29 5:18:26

摩尔缠论课程合集完整版核心课程前置课程圈子问答星球圈子摩尔缠论三个阶段

一、教程描述这是一套摩尔缠论课程合集（完整版），内容非常系统并且极为全面，包括视频、图片和文档等不同文件类型，摩尔缠论共有三个版本，有些类似软件版本迭代，后一版本是前一版本的升级和进化…...

编程日记 2025/6/29 5:44:47

java学习之数据结构：三、八大排序

主要介绍学过的各种排序算法目录 1.插入排序 1.1直接插入排序 1.2希尔排序 2.选择排序 2.1直接选择排序 2.2堆排序 3.交换排序 3.1冒泡排序 3.2快速排序 4.归并排序 5.基数排序 1.插入排序 1.1直接插入排序基本思想：就是将待排序的数据按照其元素值的…...

编程日记 2025/7/15 7:31:06

Docker Compose:服务编排：批量管理多个容器

通过docker compose进行容器批量管理：一次性启动四个容器（nginx，tomcat，redis，mysql） （1） 创建docker-compose目录 mkdir ~/docker-compose cd ~/docker-compose （2&…...

编程日记 2025/6/29 5:36:50

微服务设计约束

相较于单体应用，微服务架构在提升开发、部署等环节灵活性的同时，也提升了在运维、监控环节的复杂性。结合实践总结，微服务架构的设计有以下四条设计约束遵循： (1)微服务个体约束一个设计良好的微服务应用，所完成的功…...

编程日记 2025/7/11 22:20:41

C语言中的自定义类型 —— 结构体.位段.联合体和枚举

自定义类型 1. 前言2. 结构体2.1 结构体的声明2.2 结构体变量的定义和初始化2.3 结构体的特殊声明2.4 结构体的自引用2.5 结构体的内存对齐2.6 修改默认对齐数2.7 结构体传参 3. 位段4. 联合体5. 枚举6. 结言 1. 前言在C语言中已经为用过户提供了内置类型，如&…...

编程日记 2025/6/29 6:16:34

【序列贪心】摆动序列 / 最长递增子序列 / 递增的三元子序列 / 最长连续递增序列

⭐️个人主页：小羊 ⭐️所属专栏：贪心算法很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录摆动序列最长递增子序列递增的三元子序列最长连续递增序列摆动序列摆动序列贪心策略：统计出所有的极大值和极小…...

编程日记 2025/7/16 2:46:08

从零开发一个B站视频数据统计Chrome插件

从零开发一个B站视频数据统计Chrome插件前言 B站（哔哩哔哩）作为国内最大的弹幕视频网站之一，视频的播放量、点赞、投币、收藏等数据对于内容创作者和数据分析者来说非常重要。本文将带你一步步实现一个Chrome插件，自动统计并展…...

编程日记 2025/7/8 23:06:32

【Python实战】飞机大战

开发一个飞机大战游戏是Python学习的经典实战项目，尤其适合结合面向对象编程和游戏框架（如Pygame）进行实践。以下是游戏设计的核心考虑因素和模块划分建议： 一、游戏设计核心考虑因素性能优化 Python游戏需注意帧率控制&#xff…...

编程日记 2025/7/8 6:29:57

WebAPI项目从Newtonsoft.Json迁移到System.Text.Json踩坑备忘

1.控制器层方法返回类型不能为元组控制器层方法返回类型为元组时，序列化结果为空。因为元组没有属性只有field，除非使用IncludeFields参数专门指定，否则使用System.Text.Json进行序列化时不会序列化field var options new JsonSerializ…...

编程日记 2025/6/29 7:27:27

人工智能助力工业制造：迈向智能制造的未来

在当今数字化转型的浪潮中，人工智能（AI）技术正逐渐成为推动工业制造领域变革的核心力量。智能制造作为工业 4.0 的重要组成部分，通过将 AI 技术与传统制造工艺深度融合，正在重塑整个生产流程，提高生产效率、…...

编程日记 2025/6/29 6:15:44

影楼精修-露齿笑算法解析

注意，为避免侵权，本文图片均为AIGC生成或网络公开数据； 像素蛋糕-露齿笑在介绍本文之前，先说一下，其实露齿笑特效，并非像素蛋糕首创，早在几年前，face app就率先推出了这个效果&am…...

编程日记 2025/6/29 5:48:07

变量的解构赋值以iview的src/index.js中Vue.prototype.$IVIEW改造为例练习下怎么使用变量的解构赋值原来的写法： const install function(Vue, opts {}) {if (install.installed) return;locale.use(opts.locale);locale.i18n(opts.i18n);Object.keys(iview).fo…...

编程日记 2025/6/29 5:14:16

在Windows系统中使用Docker发布镜像到镜像仓库

在Windows系统中使用Docker发布镜像到镜像仓库的步骤如下： 步骤 1：安装并配置Docker 安装Docker Desktop • 下载Docker Desktop for Windows并安装。 • 确保启用WSL 2或Hyper-V后端（根据系统版本选择）。验证Docker运行状态打…...

编程日记 2025/7/8 13:56:28

糖尿病筛查常识---秋浦四郎

糖尿病筛查可以早期发现糖尿病或糖尿病前期（血糖异常但未达到糖尿病标准），以利于及时干预，预防并发症。因为许多人患上糖尿病时没有明显症状，但已经开始对身体造成损害，有了明显糖尿病症状才检查发现糖尿病…...

编程日记 2025/7/8 6:08:57

CSS 预处理器 Sass

目录 Sass 一、Sass 是什么？ 二、核心功能详解 1. 变量（Variables） 2. 嵌套（Nesting） 3. 混合宏（Mixins） 4. 继承（Inheritance） 5. 运算（Operations&…...

编程日记 2025/6/29 5:14:07

Mybatisplus:一些常用功能

自动驼峰 mybatis-plus:configuration:# 开启驼峰命名规则，默认true开启map-underscore-to-camel-case: true# 控制台日志打印，便于查看SQLlog-impl: org.apache.ibatis.logging.stdout.StdOutImpl TableName 作用：表名注解，标识…...

编程日记 2025/6/29 5:14:12

Golang WaitGroup 用法源码阅读笔记

使用 sync.WaitGroup可以用来阻塞等待一组并发任务完成下面是如何使用sync.WaitGroup的使用最重要的就是不能并发调用Add()和Wait() var wg sync.WaitGroupfor ... {wg.Add(1) // 不能和wg.Wait()并发执行go func() {// 不能在启动的函数里面执行wg.Add(), 否则会panicde…...

编程日记 2025/7/16 19:45:01

第二章：一致性基础 A Primer on Memory Consistency and Cache Coherence - 2nd Edition

在本章中，我们将介绍足够多的缓存一致性知识，以便理解一致性模型是如何与缓存相互作用的。我们在 2.1 节首先给出在本入门教程中所考虑的系统模型。为了简化本章以及后续章节的阐述，我们选择了尽可能简单的系统模型，该模型足以说明…...

编程日记 2025/6/29 7:57:20

C++类_移动构造函数

std::move 的主要用途是在对象所有权转移时，触发移动构造函数或移动赋值运算符，避免不必要的深拷贝，提升性能。移动构造函数和移动赋值运算符， std::move转换为右值，匹配到移动构造函数和移动赋值运算符。…...

编程日记 2025/6/29 6:14:03

Spring AI 实战：第一章、Spring AI入门之DeepSeek调用

引言：当Spring遇上AI，会擦出怎样的火花？ 作为一名Java开发者，是否曾经眼红Python阵营那些花里胡哨的AI应用？是否在对接各种大模型API时，被五花八门的接口规范搞得头大？好消息是，Spr…...

编程日记 2025/6/29 7:14:55

fastapi+vue中的用户权限管理设计

数据库设计：RBAC数据模型这是一个典型的基于SQLAlchemy的RBAC权限系统数据模型实现，各模型分工明确，共同构成完整的权限管理系统。图解说明： 实体关系： 用户(USER)和角色(ROLE)通过 USER_ROLE 中间表实现多对多关系…...

编程日记 2025/7/9 17:15:30

Space Engineers 太空工程师 [DLC 解锁] [Steam] [Windows]

Space Engineers 太空工程师 [DLC 解锁] [Steam] [Windows] 需要有游戏正版基础本体，安装路径不能带有中文，或其它非常规拉丁字符； DLC 版本至最新全部 DLC 后续可能无法及时更新文章，具体最新版本见下载文件说明 DLC 解锁列表&…...

编程日记 2025/6/29 5:18:49

随机变量数字特征

主要介绍一维随机变量期望和方差、二维随机变量期望和方差、以及协方差相关公式，及推导。一维随机变量以一个抛硬币的场景作为例子，如下： 抛掷两枚均匀硬币，如果两枚都是正面向上，则赢得2元，否则就输掉…...

编程日记 2025/7/1 17:18:02

C++总结01-类型相关

一、数据存储 1.程序数据段 • 静态（全局）数据区：全局变量、静态变量 • 堆内存：程序员手动分配、手动释放 • 栈内存：编译器自动分配、自动释放 • 常量区：编译时大小、值确定不可修改 2.程序代码段 •…...

编程日记 2025/6/29 8:09:09

【多线程】七、POSIX信号量环形队列的生产者消费者模型

文章目录 Ⅰ. 信号量一、POSIX 信号量的概念二、POSIX 信号量的类型区别三、POSIX 信号量与 SystemV 信号量的区别Ⅱ. 线程信号量基本原理一、为什么要引入信号量❓二、PV 操作三、POSIX 信号量的实现原理四、CAS操作介绍Ⅲ. POSIX未命名信号量接口一、初始化无名信号量二、销毁…...

编程日记 2025/7/4 3:26:04

二维码批量识别—混乱多张二维码识别-物品分拣—-未来之窗-仙盟创梦IDE

仙盟模型用途精准分拣：快速准确识别物品上复杂或多个二维码，依据码中信息（如目的地、品类等）实现物品自动化分拣，提高分拣效率与准确性。库存管理：识别入库、出库物品二维码，更新库存数据&am…...

编程日记 2025/6/29 6:19:56

《TensorFlow 与 TensorFlow Lite：协同驱动 AI 应用全景》

《TensorFlow 与 TensorFlow Lite：协同驱动 AI 应用全景》摘要 ：在机器学习技术浪潮中，TensorFlow 与 TensorFlow Lite 作为 Google 技术栈的核心组件，分别占据云端训练与端侧部署的关键位置。本文将系统梳理二者架构特性、功能…...

编程日记 2025/7/7 18:14:52

Spring AI 实战：第三章、Spring AI结构化输出之告别杂乱无章

引言：当程序员遇上剧荒 “周末看什么？” 这个看似简单的问题，往往能让我们在各大影视平台间反复横跳半小时，最后无奈选择重刷《老友记》。本期让我们用技术解决这个"世纪难题"：让大模型成为你的私人影视推荐…...

编程日记 2025/7/6 21:08:20

ros2 humble 控制真实机械臂（以lerobot为例）

基础版 0.确保串口访问权限 sudo chmod 666 /dev/ttyARM0 # 确保串口访问权限 1.下载 lerobot 驱动功能包 git clone https://gitee.com/kong-yue1/lerobot_devices.git 2.编写控制节点（完整代码） 主要功能是与 Feetech 电机总线进行通信&#…...

编程日记 2025/6/29 5:44:36

REINFORCE蒙特卡罗策略梯度算法详解：python从零实现

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创…...

编程日记 2025/7/12 21:21:01

模拟SIP终端向Freeswitch注册用户

1、简介使用go语言编写一个程序，模拟SIP-T58终端在Freeswitch上注册用户 2、思路以客户端向服务端Freeswitch发起REGISTER请求，告知服务器当前的联系地址构造SIP REGISTER请求创建UDP连接，连接到Freeswitch的5060端口发送初始的REGISTER请…...

编程日记 2025/7/8 6:12:28

Elasticsearch 中的索引模板：如何使用可组合模板

作者：来自 Elastic Kofi Bartlett 探索可组合模板以及如何创建它们。更多阅读： Elasticsearch：可组合的 Index templates - 7.8 版本之后想获得 Elastic 认证吗？查看下一期 Elasticsearch Engineer 培训的时间！ El…...

编程日记 2025/6/29 8:07:48