成绩案例demo

本案例较为简单,用到的知识有 v-model、v-if、v-else、指令修饰符.prevent .number .trim等、computed计算属性、toFixed方法、reduce数组方法。

涉及的功能需求有:渲染、添加、删除、修改、统计总分,求平均分等。

需求效果如下:

代码实现:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./styles/index.css" /><title>成绩案例实现</title></head><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="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 }"><span  v-if="editingId !== item.id">{{ item.score }}</span><input v-else type="text" v-model.number="item.score" @blur="finishEdit(item.id)"></td><td><!-- 阻止默认行为 --><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a><a @click="edit(item.id)" href="#" style="color: red">编辑</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"><inputtype="text"placeholder="请输入科目"v-model.trim="subject"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="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: 92 },{ id: 7, subject: '数学', score: 89 },{ id: 12, subject: '英语', score: 50 },],subject: '',score: '',editingId: null },computed: {totalScore() {return this.list.reduce((sum, item) => sum + item.score, 0)},averageScore () {if (this.list.length === 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}},methods: {del (id) {this.list = this.list.filter(item => item.id !== id)},edit(id) {this.editingId = id; // 设置正在编辑的项的ID},finishEdit(id) {this.editingId = null;},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>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/69965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++:抽象类习题

题目内容&#xff1a; 求正方体、球、圆柱的表面积&#xff0c;抽象出一个公共的基类Container为抽象类&#xff0c;在其中定义一个公共的数据成员radius(此数据可以作为正方形的边长、球的半径、圆柱体底面圆半径)&#xff0c;以及求表面积的纯虚函数area()。由此抽象类派生出…

Rust 的基本类型有哪些,他们存在堆上还是栈上,是否可以COPY?

Rust 的基本类型主要包括以下几类&#xff1a; 1. 整数类型&#xff08;Integer&#xff09; Rust 提供了有符号和无符号的整数类型&#xff1a; 有符号整数&#xff08;i8, i16, i32, i64, i128, isize&#xff09;无符号整数&#xff08;u8, u16, u32, u64, u128, usize&a…

Java面试题2025-并发编程基础(多线程、锁、阻塞队列)

并发编程 一、线程的基础概念 一、基础概念 1.1 进程与线程A 什么是进程&#xff1f; 进程是指运行中的程序。 比如我们使用钉钉&#xff0c;浏览器&#xff0c;需要启动这个程序&#xff0c;操作系统会给这个程序分配一定的资源&#xff08;占用内存资源&#xff09;。 …

AI智慧社区--百度地图

数据库&#xff1a; 前端实现 页面代码 <template><div class"app-container"><baidu-map class"bm-view" :center"center" :zoom"zoom" ready"initMap"><!-- 定位 --><bm-geolocation anchor…

【TypeScript】扩展:装饰器

文章目录 装饰器一、类装饰器1. 基本用法2. 装饰器返回值3. 构造类型4. 替换被装饰的类 二、装饰器工厂三、装饰器组合四、属性装饰器五、方法装饰器六、访问器装饰器七、参数装饰器 装饰器 装饰器本质是一种特殊函数&#xff0c;可以对类、属性、方法、参数进行扩展&#xff…

WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载

Windows中安装wsl2&#xff0c;wsl2里安装ubuntu。 1. Wsl启动后 1&#xff09;Windows下ip ipconfig 以太网适配器 vEthernet (WSL (Hyper-V firewall)): 连接特定的 DNS 后缀 . . . . . . . : IPv4 地址 . . . . . . . . . . . . : 172.19.32.1 子网掩码 . . . . . . . .…

一、TensorFlow的建模流程

1. 数据准备与预处理&#xff1a; 加载数据&#xff1a;使用内置数据集或自定义数据。 预处理&#xff1a;归一化、调整维度、数据增强。 划分数据集&#xff1a;训练集、验证集、测试集。 转换为Dataset对象&#xff1a;利用tf.data优化数据流水线。 import tensorflow a…

软件工程概论试题五

一、多选 1.好的软件的基本属性包括()。 A. 效率 B. 可依赖性和信息安全性 C. 可维护性 D.可接受性 正答&#xff1a;ABCD 2.软件工程的三要素是什么()? A. 结构化 B. 工具 C.面向对象 D.数据流! E.方法 F.过程 正答&#xff1a;BEF 3.下面中英文术语对照哪些是正确的、且是属…

CNN的各种知识点(五):平均精度均值(mean Average Precision, mAP)

平均精度均值&#xff08;mean Average Precision, mAP&#xff09; 1. 平均精度均值&#xff08;mean Average Precision, mAP&#xff09;概念&#xff1a;计算步骤&#xff1a;具体例子&#xff1a;重要说明&#xff1a;典型值范围&#xff1a; 总结&#xff1a; 1. 平均精度…

Python 中 `finally` 的执行时机与 `return` 的微妙关系

文章目录 Python 中 finally 的执行时机与 return 的微妙关系一、finally 的执行时机示例 二、return 与 finally 的交互&#xff1a;可变对象的陷阱示例 &#xff1a;可变对象在 finally 中被修改示例 &#xff1a;不可变对象的安全隔离 三、finally 中的 return&#xff1a;危…

问题的价值 ( Value of Question ) 公式

一、什么是问题的价值 我们的人生、工作的期间、瞬息万变的商业环境中&#xff0c;我们必然会面对很多问题&#xff0c;也会提出很多问题。 但这些问题是否具有回答的 价值&#xff0c;应该如何 衡量 呢&#xff1f; 简单如&#xff0c;女朋友问今晚应该吃什么、世界如何才能…

一文了解阿里的 Qwen2.5 模型

最近被DeepSeek刷屏了&#xff0c;但是在之外阿里在2025年1月28日推出了Qwen 2.5 Max模型。 Qwen2.5-Max 的特点&#xff1a;大规模的 MoE 模型&#xff0c;预训练于超 20 万亿 tokens&#xff0c;并经过 SFT 和 RLHF 后训练。 性能表现&#xff1a;在多个基准测试中与领先模型…

悬浮按钮和可交互提示的使用

xmlns:app“http://schemas.android.com/apk/res-auto” xmlns:tools“http://schemas.android.com/tools” android:id“id/drawerLayout” android:layout_width“match_parent” android:layout_height“match_parent” tools:context“.MainActivity”> <andro…

基于Django的Boss直聘IT岗位可视化分析系统的设计与实现

【Django】基于Django的Boss直聘IT岗位可视化分析系统的设计与实现&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统采用Python作为主要开发语言&#xff0c;利用Django这一高效、安全的W…

Hive:复杂数据类型之Map函数

Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型&#xff0c;这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…

C# 继承与多态详解

.NET学习资料 .NET学习资料 .NET学习资料 在 C# 面向对象编程中&#xff0c;继承与多态是两个极为关键的特性&#xff0c;它们赋予了程序强大的复用性和灵活性。理解并掌握这两个特性&#xff0c;是成为一名优秀 C# 开发者的必经之路。 一、C# 继承 1.1 继承的定义与概念 …

为AI聊天工具添加一个知识系统 之77 详细设计之18 正则表达式 之5

本文要点 昨天讨论了 本项目&#xff08;AI聊天工具添加一个知识系统&#xff09;中正则表达式模板的设计中可能要考虑到的一些问题&#xff08;讨论到的内容比较随意&#xff0c;暂时无法确定 那些考虑 是否 应该是正则表达式模板设计要考虑的以及 是否完整&#xff09;。今天…

计算机毕业设计Python动漫推荐系统 漫画推荐系统 动漫视频推荐系统 机器学习 bilibili动漫爬虫 数据可视化 数据分析 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

2025年02月02日Github流行趋势

项目名称&#xff1a;oumi 项目地址url&#xff1a;https://github.com/oumi-ai/oumi 项目语言&#xff1a;Python 历史star数&#xff1a;1416 今日star数&#xff1a;205 项目维护者&#xff1a;xrdaukar, oelachqar, taenin, wizeng23, kaisopos 项目简介&#xff1a;构建最…

谭浩强C语言程序设计(3) 7章

1、递归实现N的阶乘 c复制 #include <cstdio> // 包含标准输入输出库// 计算n的阶乘 int total 0; // 定义全局变量total用于存储阶乘结果// 递归函数计算阶乘 int fac(int a){// 如果输入的数小于0&#xff0c;输出错误信息if (a < 0){printf("%d < 0,err…