Vue--组件练习案例
图片轮播案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--轮播图片--><div id="app"><h1>轮播图</h1><button @click="last">上一张</button><img :src=`./img/${number}.jpg` style="height: 10%" width="10%"><button @click="next">下一张</button><hr><ul><li v-for="value in 5"><a href="#" @click="jump(value)">{{value}}</a></li></ul></div><script type="module">import {createApp,ref,reactive} from './vue.esm-browser.js'createApp({setup(){const number = ref(1)const next = () =>{number.value++if(number.value>5){number.value=1}}const last = () =>{number.value--if(number.value<1){number.value=5}}const jump = (index) =>{number.value = index}return{number,next,last,jump}}}).mount('#app')</script></body></html>记事本案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><input type="text" v-model="data.content"><button @click="add">添加</button><p/><ul><li v-for="(item,index) in data.list" :key="index">{{item}}<button @click="update(index)">修改</button><button @click="del(index)">删除</button></li></ul><hr>{{data.list.length}}<button @click="clear">清空</button></div><script type="module">import {createApp,ref,reactive} from '../js/vue.esm-browser.js'createApp({setup(){const data = reactive({content:"https://blog.csdn.net/m0_73856804?spm=1010.2135.3001.5343",list:["麓殇","https://blog.csdn.net/m0_73856804?spm=1010.2135.3001.5343"]})// 添加数据const add = () =>{data.list.push(data.content)console.log(data.list)}//删除数据const del = (index) =>{data.list.splice(index,1)console.log(data.list)}//修改数据const update = (index) =>{data.content = data.list[index]console.log(data.list)}//清空数据const clear = () =>{data.list = []console.log(data.list)}// 获取数据的数量return{data,add,del,clear,update}}}).mount('#app')</script></body></html>购物车案例(watch,computed)
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>购物车</title>
</head>
<style>table{width: 600px;border: 1px solid #c8baba;text-align: center;border-collapse: collapse;}table thead{background: #756161;border: 1px solid #c8baba;}table tbody tr{border: 1px solid #c8baba;height: 30px;line-height: 30px;background: #a56d6d;}
</style>
<body><div id="app"><table><thead><tr><th><input type="checkbox" v-model="data.selected" ></th><th>商品名称</th><th>商品价格</th><th>商品库存</th><th colspan="2">操作</th></tr></thead><tbody><tr v-for="(item,index) in data.goods"><td><input type="checkbox" :value="item.id" v-model="data.checkboxlist" ></td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.stock}}</td><td><button @click="sub(item)">-</button>{{item.count}}<button @click="add(item)">+</button></td><td><button @click="del(index,item.id)">删除</button></td></tr></tbody><tfoot><tr><td colspan="3">总价:{{totalPrice}}</td></tr></tfoot></table>
</div>
<!--@change:change事件是在元素的值发生改变的时候会触发的事件，我们可以通过该事件实现商品的全选和取消全选-->
<script type="module">import {createApp,reactive,watch,computed} from '../js/vue.esm-browser.js'createApp({setup() {const data = reactive({checkboxlist:[],//存储购物车中的选中的商品selected: false,//全选按钮是否被选中goods: [{id: 1,name: '华为手机',price: 4000,count: 100,stock: 200},{id: 2,name: '小米手机',price: 2600,count: 100,stock: 200},{id: 3,name: '三星手机',price: 8000,count: 100,stock: 200},{id: 4,name: '荣耀手机',price: 7000,count: 100,stock: 200}],})const totalPrice = computed(() => {let total = 0//reduce定义：用于数组中的所有元素进行迭代操作，并将每一次操作的结果累加在一个初始值上//reduce接受两个参数：一个是累加函数，一个是初始值//reduce：将data.checkboxList数组中的每个对象的price和count相乘，将结果累加在初始值 0 上，最后返回结果// const item1 = data.goods.find(good => good.id === data.checkboxlist[i])for (let i = 0; i < data.checkboxlist.length; i++) {const item = data.goods.find(good => good.id === data.checkboxlist[i])if (item) {total += item.price * item.count}}return total})const add = (item) => {if (item.count < item.stock) {item.count++item.stock--}}const sub = (item) => {if (item.count > 1) {item.count--item.stock++}}let flag = truewatch(() =>data.selected,(newValue,oldValue)=>{console.log(newValue,oldValue)if (newValue) {data.checkboxlist = data.goods.map(item => item.id)}else {if (flag){data.checkboxlist = []}}})watch(()=>data.checkboxlist,(newValue,oldValue)=>{if (newValue.length === data.goods.length && newValue.length !== 0){data.selected = trueflag = true}else{data.selected = falseflag = false}})const del = (index,id) => {data.goods.splice(index,1)let newArr = data.checkboxlist.filter((item,index) =>{return item.id !== id})data.checkboxlist = newArr}return {data,totalPrice,add,del,sub,}}}).mount('#app')
</script>
</body>
</html>前端是练出来的！
相关文章：
Vue--组件练习案例
图片轮播案例： <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>Title</title></head><body><!--轮播图片--><div id"app"><h1>轮播图</h1…...
Sentinel源码—1.使用演示和简介一
大纲 1.Sentinel流量治理框架简介 2.Sentinel源码编译及Demo演示 3.Dashboard功能介绍 4.流控规则使用演示 5.熔断规则使用演示 6.热点规则使用演示 7.授权规则使用演示 8.系统规则使用演示 9.集群流控使用演示 1.Sentinel流量治理框架简介 (1)与Sentinel相关的问题 …...
空间信息可视化——WebGIS前端实例（二）
技术栈：原生HTML 源代码：CUGLin/WebGIS: This is a project of Spatial information visualization 5 水质情况实时监测预警系统 5.1 系统设计思想 水安全是涉及国家长治久安的大事。多年来，为相应国家战略，诸多地理信息领域的…...
高并发内存池（前言介绍）
高并发内存池项目介绍 1.项目介绍2.项目的知识储备要求3.了解池化技术及内存池4.本次项目中内存池解决的问题5.malloc 1.项目介绍 此项目是实现一个高并发的内存池，它的原型是google的一个开源项目tcmalloc，tcmalloc全程Thread-Caching Mallocÿ…...
误译、值对象和DDD伪创新-《分析模式》漫谈56
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 “Analysis Patterns”的第14章“类型模型设计模板模式”原文： Examples of such object types are the classic built-in data types of programming environments: inte…...
Java单例模式：实现全局唯一对象的艺术
精心整理了最新的面试资料和简历模板，有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 一、什么是单例模式？ 单例模式（Singleton Pattern）是一种创建型设计模式，确保一个类只有一个实例，…...
机器学习项目二：帕金森病检测
目录 下载数据 一、导入相关包 二、数据加载 三、特征工程 四、构建模型 五、评估与可视化 六、程序流程 七、完整代码 一、导入相关包 # 导入库部分 import numpy as np # 数值计算基础库 import pandas as pd # 数据处理库 from sklearn.preprocessing import MinMaxS…...
FreeDogs：AI、区块链与迷因文化的深度融合
引言 在 Web3 时代，人工智能（AI）、区块链技术和迷因文化的结合催生了一种全新的去中心化生态系统。FreeDogs 项目作为这一领域的创新代表，通过独特的技术与文化融合模式迅速受到关注。它利用 AI 驱动的智能营销网络推动迷因文化的…...
《组合优于继承：构建高内聚低耦合模块的最佳实践》
《组合优于继承：构建高内聚低耦合模块的最佳实践》 一、引言：编程范式中的选择 在软件设计中，继承和组合是两个重要的设计模式。继承（Inheritance）常被用来实现代码复用，但滥用继承容易导致脆弱的类层次结构，增加耦合度和维护成本。而组合（Composition）通过将功能分解…...
机器学习02——RNN
一、RNN的基本概念 定义 循环神经网络（Recurrent Neural Network，RNN）是一种用于处理序列数据的神经网络架构。它与传统的前馈神经网络（如多层感知机）不同，RNN具有“记忆”功能，能够利用前一时…...
Java基础——面试自我总结
1、String类中常用方法和equals区别 答：对于和equals这两个都是用来比较判断是否相等，其中用来判断两个变量的值是否相等，变量的值的类型分为基本数据类型和引用数据类型。对于，基本数据类型是直接进行值比较，而对于引…...
低功耗设计：Level Shift的种类（以SAED EDK 32/28nm工艺库为例）
在多电压设计中，当信号从一个电压域跨越到另一个电压域时，需要使用电压转换器(Level Shift)。它的工作方式类似于缓冲器，但其输入和输出使用不同的电压，作用是将一个逻辑信号从一个电压转换为另一个电压，并在输入到输出…...
UE5 Chaos ：渲染网格体 (Render Mesh） 和模拟网格体 是如何关联的？为什么模拟网格体 可以驱动渲染网格体？
官方文献：https://dev.epicgames.com/community/learning/tutorials/pv7x/unreal-engine-panel-cloth-editor 这背后的核心是一种常见的计算机图形学技术，通常称为代理绑定 (Proxy Binding) 或 表面变形传递 (Surface Deformation Transfer)。 关联机制…...
Fiddler为什么可以看到一次HTTP请求数据？
1、作为代理服务器 Fiddler作为代理服务器，拦截了设备与互联网服务器之间的所有HTTP和HTTPS流量。当客户端（如浏览器）发送请求时，请求先到达Fiddler，然后由Fiddler转发到目标服务器；服务器的响应也会返回给…...
RAG（Retrieval-Augmented Generation）召回算法是检索增强生成模型中的关键组件
RAG（Retrieval-Augmented Generation）召回算法是检索增强生成模型中的关键组件，其核心目标是从大规模文档库中高效检索与输入查询相关的信息，以辅助生成模型产生更准确的回答。以下是该算法的关键点解析： ### 1. **核…...
[NOIP 2003 普及组] 栈 Java
import java.io.*;public class Main {public static void main(String[] args) throws IOException {BufferedReader br new BufferedReader(new InputStreamReader(System.in));int n Integer.parseInt(br.readLine());int[] dp new int[n 1];dp[0] 1; // 空序列只有一种…...
5.5 GitHub数据秒级分析核心揭秘：三层提示工程架构设计解析
GitHub Sentinel Agent 分析报告功能设计与实现 关键词：GitHub 数据分析, 提示工程设计, Pull Request 分析, Issues 跟踪, 竞品对比 项目进展报告生成功能设计 报告生成模块是 GitHub Sentinel 的核心功能，通过三层嵌套式提示工程架构实现深度分析： #mermaid-svg-vdHRUan…...
PE文件（十五）绑定导入表
我们在分析Windows自带的一些程序时，常常发现有的程序，如notepad，他的IAT表在文件加载内存前已经完成绑定，存储了函数的地址。这样做可以使得程序是无需修改IAT表而直接启动，这时程序启动速度变快。但这种方式只适用于…...
如何快速部署基于Docker 的 OBDIAG 开发环境
很多开发者对 OceanBase的 SIG社区小组很有兴趣，但如何将OceanBase的各类工具部署在开发环境，对于不少开发者而言都是比较蛮烦的事情。例如，像OBDIAG，其在WINDOWS系统上配置较繁琐，需要单独搭建C开发环境。此外&#x…...
Multimodal-CoT与MCP的融合医疗AI编程路线探析
引言 在医疗AI领域，多模态数据融合与模块化系统设计是提升诊断精度和临床实用性的关键。Multimodal Chain-of-Thought（Multimodal-CoT）通过构建多源数据的推理链增强决策透明度，而Model Context Protocol（MCP）作为标准化接口协议，为AI系统提供灵活的数据源集成能力。两…...
基于单片机的智能养生油炸炉系统设计与实现
标题:基于单片机的智能养生油炸炉系统设计与实现 内容:1.摘要 本文针对传统油炸炉功能单一、无法满足现代养生需求的问题，设计并实现了基于单片机的智能养生油炸炉系统。通过采用STC89C52单片机作为控制核心，结合温度传感器、液位传感器、继电器等硬件&…...
MySQL流程控制
一：介绍 在 MySQL 中，流程控制语句用于控制存储过程和自定义函数中的程序流程。主要的流程控制语句包括：IF 语句、CASE 语句、LOOP 语句、LEAVE 语句、ITERATE 语句、REPEAT 语句和 WHILE 语句 （1）：if条件…...
在思科模拟器show IP route 发现Gateway of last resort is not set没有设置最后的通道
如果在show ip route的时候出现没有设置最后的通道Gateway of last resort is not set Switch#show ip route Codes: C - connected, S - static, I - IGRP, R - RIP, M - mobile, B - BGPD - EIGRP, EX - EIGRP external, O - OSPF, IA - OSPF inter areaN1 - OSPF NSSA exte…...
Java雪花算法
以下是用Java实现的雪花算法代码示例，包含详细注释和异常处理： 代码下面有解析 public class SnowflakeIdGenerator {// 起始时间戳（2020-01-01 00:00:00）private static final long START_TIMESTAMP 1577836800000L;// 各部分…...
【中大厂面试题】TCP 校招 java 后端最新面试题
TCL（一面） 1. Spring 初始化Bean前要做什么？有几种方式 在 Spring 容器调用 Bean 的初始化方法（如 init-method、PostConstruct 等）之前，会按顺序完成以下关键步骤：实例化 → 属性注入 → Aw…...
【教学类-102-11】蝴蝶外轮廓01——Python对黑白图片进行PS填充三种颜色+图案描边+图案填充白色+制作1图2图6图24图
背景需求： 用Python，对白色255背景的图片进行了透明化、制作点状或线段的描边裁剪线 【教学类-102-10】剪纸图案全套代码09——Python线条虚线优化版04（原图放大白背景）+制作1图2图6图24图-CSDN博客文章浏览阅读1k次，点赞27次，收藏8次。【教学类-102-10】剪纸图案全套代…...
【数据库系统概论】第3章 SQL（四）视图（超详细）
视图（View）是数据库中的虚拟表 通过执行查询定义并存储在数据库中，可以像普通表一样被查询和使用。 视图本身并不存储数据，而是基于一个或多个表的查询结果动态生成。 视图的概念 视图( View )是由其它表或视图上的查询所定义…...
HTTP：六.HTTP代理相关介绍
什么是HTTP代理 代理是指获授权代表他人执行操作的人员，代理服务器在在线世界中提供此操作。 代理服务器 充当用户和互联网之间的网关，并防止访问网络以外的任何人。通过 Web 浏览器定期访问互联网，使用户能够直接与网站连接。但是代理充当中间人，代表用户与网页通信。 当…...
【Python爬虫】详细工作流程以及组成部分
目录 一、Python爬虫的详细工作流程 确定起始网页 发送 HTTP 请求 解析 HTML 处理数据 跟踪链接 递归抓取 存储数据 二、Python爬虫的组成部分 请求模块 解析模块 数据处理模块 存储模块 调度模块 反爬虫处理模块 一、Python爬虫的详细工作流程 在进行网络爬虫工…...
深入解析UML图：版本演变、静态图与动态图详解
目录 前言1 UML的版本演变1.1 UML 1.x阶段：统一的开始1.2 UML 2.x阶段：功能的扩展与深化 2 UML图的分类概述3 UML静态图详解3.1 类图（Class Diagram）3.2 对象图（Object Diagram）3.3 组件图（Comp…...
老旧测试用例生成平台异步任务与用户通知优化
在现代 Web 开发中，异步任务处理和用户通知是两个重要的功能。由于老旧测试平台【测试用例生成平台，源码分享】进行智能化升级后，未采用异步任务处理，大模型推理时间较长，导致任务阻塞，无法处理其他任务&am…...
数据结构初阶：队列
本篇博客主要讲解队列的相关知识。 目录 1.队列 1.1 概念与结构 1.2 队列头文件（Queue.h） 1.2.1 定义队列结点结构 1.2.2 定义队列的结构 1.3 队列源代码（Queue.h） 1.3.1 队列的初始化 1.3.2 队列的销毁 1.3.3 入队---队尾 1…...
苍穹外卖。12 数据统计
12.1 工作台 12.1.1 需求分析与设计 12.1.2 代码导入 12.1.3 测试 测试通过 12.2 Apache POI 12.2.1 需求分析与设计 12.2.2 案例 column表示索引行...
WebSocket 和 HTTP长轮询
一、HTTP长轮询（Long Polling） 1. 工作原理 传统轮询（低效）：客户端每隔几秒向服务器发一次请求，问“有新数据吗？”，即使服务器没有数据也会立即返回“无”。长轮询（改进…...
高等数学同步测试卷 同济7版 试卷部分 上 做题记录 第三章微分中值定理与导数的应用同步测试卷 B 卷
第三章微分中值定理与导数的应用同步测试卷 B 卷 一、单项选择题(本大题共5小题,每小题3分,总计15分) 1. 2. 3. 4. 5. 二、填空题(本大题共5小题,每小题3分,总计15 分) 6. 7. 8. 9. 10. 三、求解下列各题(本大题共5小题,每小题6分,总计 3…...
生成式引擎优化（GEO）发展史与行业标准演变
一、生成式引擎优化（GEO）发展史与行业标准演变 随着 ChatGPT、Bard、Claude、文心一言等生成式AI搜索产品快速发展，GEO（Generative Engine Optimization，生成式引擎优化）也应运而生，成为继SEO、…...
美客多自养号测评技术解析：如何低成本打造安全稳定的测评体系
美客多（MercadoLibre）自养号测评系统的搭建需综合考虑硬件、软件、网络环境及操作流程的合规性，以下是基于多篇行业指南整理的核心步骤与要点： 一、前期规划与准备 1. 明确目标与规则 • 确定测评目的（如提升产品曝…...
STM32单片机入门学习——第36节: [11-1] SPI通信协议
写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.14 STM32开发板学习——第36节: [11-1] SPI通信协议 前言开发板说明引用解答和科普一…...
Qt QML - qmldir使用方法详解
以实际例子看qmldir的使用 1.搞一个qmldir2.让QML找到你的qmldir （重点）.pro 工程文件QQmlApplicationEngine加载主QML处 3.用起来你的模块 qmldir是Qt QML模块化的基石，其设计初衷是为解决QML文件的组织、复用和依赖管理问题,。只需要在每个…...
AI大模型赋能工业制造：智能工厂的全新跃迁路径
📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 引言：从自动化到智造化，工业领域的AI革命正悄然发生 在过去几十年中，制造业经历了机械化、电气化和自动化三次浪潮。如今，第四次工业革命——以人工智能、大数据、云计算、物联网为代表的“工业…...
LanDiff：赋能视频创作，语言与扩散模型的融合力量
自从 Wan 2.1 发布以来，AI 视频生成领域似乎进入了一个发展瓶颈期，但这也让人隐隐感到：“DeepSeek 时刻”即将到来！就在前几天，浙江大学与月之暗面联合推出了一款全新的文本到视频（T2V）生成模型…...
Windows 图形显示驱动开发-WDDM 1.2功能~显示设备的容器id支持
容器 ID 设备驱动程序接口 (DDI) 在显示微型端口驱动程序中实现此函数和结构： DxgkDdiGetChildContainerIdDXGK_CHILD_CONTAINER_ID 容器 ID 说明 监视设备中的新功能可以提供更好的用户体验。 具体而言，通用串行总线 (USB) 集线器是监视器上用于连…...
基于PyQt5和OpenCV的传统图像分割应用UI程序
目录 1. 程序概述 2. 用户界面设计 主窗口布局 图像显示区域 控制面板区域 3. 核心功能实现 图像处理功能 关键方法 4. 特色实现 区域生长算法改进 分水岭算法改进 GrabCut算法改进 5. 用户体验优化 6. 技术栈 7. 使用说明 8. 完整代码 9. 测试结果 本文实现了…...
java使用HTTP实现多线程爬取数据
Java中使用HTTP多线程爬取数据。首先，我得理解他们的需求。可能想要高效地抓取大量网页数据，而单线程可能不够快，所以需要多线程来提高效率。不过，多线程爬虫需要考虑的问题挺多的，比如线程安全、请求频率控制、异常处…...
：收发数据包+数据校验)
08【基础学习】串口通信(三)：收发数据包+数据校验
收发数据包数据校验 1、和校验异或校验1.1、HEX固定长度数据包校验1.2、HEX不固定长度数据包校验 2、CRC校验 1、和校验异或校验 和校验：将接收到的数据全部相加后，取结果的最后一个字节的数据 异或校验：将接收到的数据全部相异或后ÿ…...
已开源！CMU提出NavRL ：基于强化学习的无人机自主导航和动态避障新方案
导读在无人机技术快速发展的今天，如何确保无人机在复杂动态环境中的安全飞行成为一个关键挑战。传统的导航方法通常将决策过程分解为预测和规划两个独立模块，这种手工设计的系统虽然在特定环境中表现良好，但当环境条件发生变化时，…...
C++ （类的设计，对象的创建，this指针，构造函数）
类的设计 C对结构体是有增强的 可以包含函数作为结构体成员 可以直接定义变量 在结构体成员函数里面可以直接访问结构体成员变量 struct student{string name;int age;float score;void play_game(const string &name);}void student::play_game(const string game){}…...
【C++】——lambda表达式
🌟 前言:C Lambda表达式,当函数开始"叛逆期" 你是否有过这样的崩溃瞬间？ 为了写个只用到一次的排序规则，被迫定义了一个类在std::for_each里塞函数指针，代码瞬间变成"古董级"写法看着层的循环…...
DHCP简单例子
本文描述了使用ENsp模拟DHCP Global和DHCP 中继两种简单配置过程。 拓朴图 DHCP全局配置 此配置较为简单，因为全局既支持局域网，也支持跨网络分配。 # DHCP Server1 <Huawei>system-view [Huawei]sysname server1 [server1]dhcp enable …...
Spark-SQL简介及核心编程
Spark-SQL概述：是Spark用于结构化数据处理的模块，前身是Shark。Shark基于Hive开发，使SQL-on-Hadoop性能大幅提升，但对Hive依赖制约了Spark发展。SparkSQL汲取Shark优点并重新开发，在数据兼容、性能优化和组件扩展上优势…...