Vue第三篇:最简单的vue购物车示例
本文参考:Vue Cli(脚手架)实现购物车小案例 - - php中文网博客
效果图:

编写流程:
1、首先通过@vue/cli创建工程
vue create totalprice
2、改写App.vue代码如下:
<template><div><div v-if="cartlist.length <= 0">你没有选择的商品,购物车为空,去购物</div><table v-else><caption> <!--表格标题--><h1>购物车</h1></caption><tr><th>选中</th><th>编号</th><th>商品名称</th><th>商品价格</th><th>购买数量</th><th>操作</th></tr><tr v-for="(item, index) in cartlist" :key="item.id"><td><input type="checkbox" v-model="item.checkbox"></td><td>{{ item.id }}</td><td>{{ item.name }}</td><td><small>¥</small>{{ item.price.toFixed(2) }}</td><td><button @click="item.count--" :disabled="item.count <= 1">-</button>{{ item.count }}<button @click="item.count++">+</button></td><td><button @click.prevent="del(index)">删除</button></td></tr><tr><td colspan="3" align="center">总价</td><td colspan="3" align="center">{{ totalPrice }}</td></tr></table></div>
</template><script>export default {name: 'app',data(){return{cartlist:[{id: 1,checkbox: true,name: '《细说PHP》',price: 10,count: 1},{id: 2,checkbox: true,name: '《细说网页制作》',price: 10,count: 1},{id: 3,checkbox: true,name: '《细说JavaScript语言》',price: 10,count: 1},{id: 4,checkbox: true,name: '《细说DOM和BOM》',price: 10,count: 1},{id: 5,checkbox: true,name: '《细说Ajax与jQuery》',price: 10,count: 1},{id: 6,checkbox: true,name: '《细说HTML5高级API》',price: 10,count: 1}]}},methods:{del(index){this.cartlist.splice(index, 1)}},computed:{totalPrice(){let sum = 0;for(let book of this.cartlist){if(book.checkbox){sum += book.price * book.count;}}return '¥' + sum.toFixed(2)}}}
</script><style scoped>table{width: 600px;border: 1px solid #888888;border-collapse: collapse;}th{background-color: #ccc;}td,th{border: 1px solid #888888;padding: 10px;}</style>
3、代码中相关内容说明:
(1)<caption>为table的标题
(2)在组件中使用v-for时,必须添加:key属性,否则会报错,为了性能考虑
(3)colspan属性,表示某个td横跨的列数
(4)splice()函数用于从当前数组中移除一部分连续的元素。参数包括start和deleteCount。
(5)border-collapse,折叠样式
相关文章:
Vue第三篇:最简单的vue购物车示例
本文参考:Vue Cli(脚手架)实现购物车小案例 - - php中文网博客 效果图: 编写流程: 1、首先通过vue/cli创建工程 vue create totalprice 2、改写App.vue代码如下: <template><div><div v…...
MFC 基于数据库的管理系统
文章目录 初始化设置菜单 添加数据库类创建数据库配置数据库 全部代码 初始化 创建文件选择基于CListView 初始化数据 public:CListCtrl& m_list;CSQLView::CSQLView() noexcept:m_list(GetListCtrl()) {// TODO: 在此处添加构造代码}void CSQLView::OnInitialUpdate() {C…...
EfficientNet论文笔记
EfficientNet论文笔记 通过NAS平衡了channel,depth,resolution,发现在相同的FLOPs下,同时增加 depth和 resolution的效果最好。 数据集效果小于resolution怎么办? EfficientNet—b0框架 表格中每个MBConv后会跟一个…...
系统学习Linux-SSH远程服务(二)
概念 安全外壳协议,提供安全可靠的远程连接 特点 ssh是工作在传输层和应用层的协议 ssh提供了一组管理命令 ssh 远程登陆 scp 远程拷贝 sftp 远程上传下载 ssh-copy-id ssh keygen 生成 提供了多种身份验证机制 身份验证机制 密码验证 需要提供密码 密…...
PyTorch训练RNN, GRU, LSTM:手写数字识别
文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集:MNIST 该数据集的内容是手写数字识别,其分为两部分,分别含有60000张训练图片和10000张测试图片 图片来源:https://tensornews.cn/mnist_intr…...
基于深度学习的高精度道路瑕疵检测系统(PyTorch+Pyside6+YOLOv5模型)
摘要:基于深度学习的高精度道路瑕疵(裂纹(Crack)、检查井(Manhole)、网(Net)、裂纹块(Patch-Crack)、网块(Patch-Net)、坑洼块&#x…...
【裸辞转行】是告别,也是新的开始
一年多了没有更新,是因为去年身体加心理因素辞职了,并且大概率不会再做程序员了,嗯。本来觉得可能再也不会打开 CSDN 了,想了想,还是来做个告别吧,任何事情都该有始有终才对。 回忆碎碎念 是在去年的 11 …...
了解交换机接口的链路类型(access、trunk、hybrid)
上一个章节中讲到了vlan的作用及使用,这篇了解一下交换机接口的链路类型和什么情况下使用 vlan在数据包中是如何体现的,在上一篇的时候提到测试了一下,从PC1去访问PC4的时候,只从E0/0/2发送给了E0/0/3这是,因为两个接…...
Android系统启动流程分析
当按下Android系统的开机电源按键时候,硬件会触发引导芯片,执行预定义的代码,然后加载引导程序(BootLoader)到RAM,Bootloader是Android系统起来前第一个程序,主要用来拉起Android系统程序,Android系统被拉起…...
如何在Ubuntu上安装OpenneBula
OpenNebula是一个开源云计算平台,允许我们在完全虚拟化云中组合和管理VMware和KVM虚拟机 第1步:安装MariaDB数据库服务器 OpenNebula还需要一个数据库服务器来存储其内容。 安装MariaDB: 1 2 sudo apt update sudo apt install mariadb-s…...
解决MySQL中分页查询时多页有重复数据,实际只有一条数据的问题
0 前言 有一个离奇的BUG,在查询时,第一页跟第二页有一个共同的数据。有的数据却不显示。 后来发现是在SQL排序时没用主键排序。 解决:使用主键排序 以下是我准备的举例,可以自己试试。 1 数据准备 SET NAMES utf8mb4; SET FORE…...
【数据结构】时间复杂度---OJ练习题
目录 🌴时间复杂度练习 📌面试题--->消失的数字 题目描述 题目链接:面试题 17.04. 消失的数字 🌴解题思路 📌思路1: malloc函数用法 📌思路2: 📌思路3&…...
京东自动化功能之商品信息监控是否有库存
这里有两个参数,分别是area和skuids area是地区编码,我这里统计了全国各个区县的area编码,用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后,会显示两种状态,判断有货或者无货状态,详情如下图所示 简单编写下python代码,比如我们的地址是北京市…...
【SwitchyOmega】SwitchyOmega 安装及使用
文章目录 安装教程使用教程 安装教程 SwitchyOmega 谷歌商店下载链接:https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?hlen-US 在谷歌商店搜索 SwitchyOmega, 选择 Proxy SwitchyOmega 点击 Add t…...
CentOS5678 repo源 地址 阿里云开源镜像站
CentOS5678 repo 地址 阿里云开源镜像站 https://mirrors.aliyun.com/repo/ CentOS-5.repo https://mirrors.aliyun.com/repo/Centos-5.repo [base] nameCentOS-$releasever - Base - mirrors.aliyun.com failovermethodpriority baseurlhttp://mirrors.aliyun.com/centos/$r…...
【LLM】Langchain使用[二](模型链)
文章目录 1. SimpleSequentialChain2. SequentialChain3. 路由链 Router Chain Reference 1. SimpleSequentialChain 场景:一个输入和一个输出 from langchain.chat_models import ChatOpenAI #导入OpenAI模型 from langchain.prompts import ChatPromptTempla…...
简单机器学习工程化过程
1、确认需求(构建问题) 我们需要做什么? 比如根据一些输入数据,预测某个值? 比如输入一些特征,判断这个是个什么动物? 这里我们要可以尝试分析一下,我们要处理的是个什么问题&…...
【MongoDB】SpringBoot整合MongoDB
【MongoDB】SpringBoot整合MongoDB 文章目录 【MongoDB】SpringBoot整合MongoDB0. 准备工作1. 集合操作1.1 创建集合1.2 删除集合 2. 相关注解3. 文档操作3.1 添加文档3.2 批量添加文档3.3 查询文档3.3.1 查询所有文档3.3.2 根据id查询3.3.3 等值查询3.3.4 范围查询3.3.5 and查…...
关于游戏引擎(godot)对齐音乐bpm的技术
引擎默认底层 1. _process(): 每秒钟调用60次(无限的) 数学 1. bpm1分钟节拍数量60s节拍数量 bpm120 60s120拍 2. 每拍子时间 60/bpm 3. 每个拍子触发周期所需要的帧数 每拍子时间*60(帧率) 这个是从帧数级别上对齐拍子的时间&#x…...
【Go】实现一个代理Kerberos环境部分组件控制台的Web服务
实现一个代理Kerberos环境部分组件控制台的Web服务 背景安全措施引入的问题SSO单点登录 过程整体设计路由反向代理登录会话组件代理YarnHbase 结果 背景 首先要说明下我们目前有部分集群的环境使用的是HDP-3.1.5.0的大数据集群,除了集成了一些自定义的服务以外&…...
9大核心优势!Outfit字体全方位应用指南:从安装到精通
9大核心优势!Outfit字体全方位应用指南:从安装到精通 【免费下载链接】Outfit-Fonts The most on-brand typeface 项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts Outfit字体作为一款专业开源无衬线字体,凭借9种完整字重体…...
Windows下RedisInsight保姆级安装教程:从下载到连接Redis全流程详解
Windows平台RedisInsight全流程实战指南:从零搭建高效Redis可视化环境 Redis作为当下最流行的内存数据库之一,其强大的性能与丰富的数据结构深受开发者青睐。但在日常开发中,仅通过命令行操作Redis难免效率低下——这正是RedisInsight的价值所…...
Android Gradle - Gradle 自定义插件(Build Script 自定义插件、buildSrc 自定义插件、独立项目自定义插件)
一、Build Script 自定义插件 1、基本介绍插件代码直接写在模块级 build.gradle 文件中逻辑非常简单,且仅在该模块使用2、演示 (1)具体实现 在模块级 build.gradle 文件中定义插件 class SimpleBuildScriptPlugin implements Plugin<Proje…...
大模型应用指南:小白程序员必收藏,轻松入门AI前沿技术!
2025年大模型技术已在IT、金融、制造等领域广泛应用,从智能客服到数据分析,助力企业转型。沙丘智库《大模型应用跟踪月报》收录504个案例,揭示行业分布、应用场景及发展趋势。大模型不仅是技术突破,更是时代标志,小白程…...
Python tkinter文件对话框实战:5分钟搞定文件选择与保存功能(附完整代码)
Python tkinter文件对话框实战:5分钟搞定文件选择与保存功能(附完整代码) 在开发桌面应用程序时,文件选择功能几乎是必不可少的。无论是需要用户上传文件、保存处理结果,还是选择工作目录,一个直观的文件对…...
PyTorch实战:从零构建ResNet50模型(CIFAR10训练+测试+ONNX转换)
1. ResNet50模型基础认知 第一次接触ResNet50时,我被它的"残差连接"设计惊艳到了。传统神经网络随着层数增加会出现梯度消失问题,而ResNet通过跨层直连通道,让信息能够无损传递到更深层。这就好比在高速公路上设置应急车道…...
Surface硬盘不够用?教你用cfadisk把SD卡变本地硬盘(附详细图文)
Surface硬盘扩容实战:用cfadisk将SD卡完美变身本地存储 每次打开Surface的存储设置,看到那根触目惊心的红色容量条,相信不少用户都会感到焦虑。作为微软旗下最受欢迎的移动生产力工具,Surface系列在便携性和性能上表现出色&#x…...
微信单向好友检测终极指南:如何一键找出并清理删除你的微信好友
微信单向好友检测终极指南:如何一键找出并清理删除你的微信好友 【免费下载链接】WechatRealFriends 微信好友关系一键检测,基于微信ipad协议,看看有没有朋友偷偷删掉或者拉黑你 项目地址: https://gitcode.com/gh_mirrors/we/WechatRealFr…...
Nginx反向代理实战:不改代码轻松解决前后端跨域问题(附完整配置模板)
Nginx反向代理实战:不改代码轻松解决前后端跨域问题(附完整配置模板) 前后端分离架构已成为现代Web开发的主流模式,但随之而来的跨域问题却让不少开发者头疼。想象一下这样的场景:你的前端运行在https://frontend.com&…...
Beyond Compare 5密钥生成器:专业文件对比工具的永久激活方案
Beyond Compare 5密钥生成器:专业文件对比工具的永久激活方案 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 你是否正在为Beyond Compare 5的30天评估期到期而烦恼?这款…...
