【vue】购物车案例优化

对 购物车案例 进行优化

  • watch实现全选/取消全选
  • watch实现全选状态的检查
  • computed计算总价格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><table><thead><tr><!-- 全选 --><!-- <td><input type="checkbox" @click="selectAll" v-model="data.selected"></td> --><td><input type="checkbox" v-model="data.selected"></td><td>商品名称</td><td>商品价格</td><td>库存</td><!-- colspan2: 单元格跨度为2 --><td colspan="2">操作</td></tr></thead><tbody><tr v-for="(item, index) in data.list" :key="item.id"><td><!-- <input type="checkbox" :value="item" v-model="data.checkboxList" @change="checkSelect"> --><input type="checkbox" :value="item" v-model="data.checkboxList"></td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.stock}}</td><td><button @click="sub(item)">-</button>{{item.number}}<button @click="add(item)">+</button></td><td><button @click="del(index,item.id)">删除</button></td></tr></tbody><tfoot><tr><td>总价格: {{totalPrice}}</td></tr></tfoot></table></div><script type="module">import { createApp, reactive, ref, watch, computed } from './vue.esm-browser.js'createApp({setup() {const data = reactive({selected: false,//全选?checkboxList: [],//购物车中的商品list: [{id: 1,//编号name: '洗衣机',//名字price: 10000,//价格number: 1,//数量stock: 10//库存},{id: 2,name: '电冰箱',price: 20000,number: 2,stock: 8},{id: 3,name: '空调',price: 30000,number: 3,stock: 6},{id: 4,name: '电视',price: 40000,number: 4,stock: 4},{id: 5,name: '微波炉',price: 50000,number: 5,stock: 20}]})// //全选/反选// const selectAll = () => {//     data.selected = !data.selected//     if (data.selected) {//全选//         data.checkboxList = data.list//     }//     else {//反选//         data.checkboxList = []//     }// }// //取消一个物品时候,自动取消全选// const checkSelect = () => {//     if (data.checkboxList.length == data.list.length && data.list.length != 0) {//         data.selected = true//     }//     else {//         data.selected = false//     }// }let flag = true//全选/反选watch(() => data.selected, (newValue, oldValue) => {console.log(newValue, oldValue)if (newValue) {//全选data.checkboxList = data.list}else {//反选if (flag) {data.checkboxList = []}}})//全选检查watch(() => data.checkboxList, (newValue, oldValue) => {console.log(newValue, oldValue)console.log(newValue.length)if (newValue.length == data.list.length && data.list.length != 0) {data.selected = trueflag = true}else {data.selected = falseflag = false}})//计算总价格// const totalPrice = () => {//     let total = 0//     for (let i = 0; i < data.checkboxList.length; i++) {//         total += data.checkboxList[i].price * data.checkboxList[i].number//     }//     return total// }//计算总价格const totalPrice = computed(() => {let total = 0for (let i = 0; i < data.checkboxList.length; i++) {total += data.checkboxList[i].price * data.checkboxList[i].number}return total})//增加物品数量const sub = (value) => {value.number--if (value.number < 1) {value.number = 1}}//减少物品数量const add = (value) => {value.number++if (value.number > value.stock) {value.number = value.stock}}//删除物品const del = (index, id) => {data.list.splice(index, 1)//过滤器:筛选元素,返回新的数组let newArr = data.checkboxList.filter((value, index) => {return value.id != id//删除id相同的元素})data.checkboxList = newArr}return {data,// selectAll,// checkSelect,totalPrice,sub,add,del}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

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

相关文章

014:vue3 van-list van-pull-refresh实现上拉加载,下拉刷新

文章目录 1. 实现上拉加载&#xff0c;下拉刷新效果2. van-list&#xff0c;van-pull-refresh组件详解2.1 van-list组件2.2 van-pull-refresh组件 3. 完整案例4. 坑点&#xff1a;加载页面会一直调用加载接口 1. 实现上拉加载&#xff0c;下拉刷新效果 通过下拉刷新加载下一页…

淘宝扭蛋机小程序:扭出惊喜,乐享购物新体验

在快节奏的现代生活中&#xff0c;人们总是在寻找新鲜、有趣的娱乐方式。淘宝扭蛋机小程序应运而生&#xff0c;为您带来前所未有的购物与娱乐结合新体验。在这里&#xff0c;每一次的扭动都充满惊喜&#xff0c;每一次的点击都带来乐趣&#xff0c;让您在购物的同时&#xff0…

4.Labview簇、变体与类(上)

在Labview中&#xff0c;何为簇与变体&#xff0c;何为类&#xff1f;应该如何理解&#xff1f;具体有什么应用场景&#xff1f; 本文基于Labview软件&#xff0c;独到的讲解了簇与变体与类函数的使用方法和场景&#xff0c;从理论上讲解其数据流的底层概念&#xff0c;从实践上…

汽车维修类中译英的英语翻译

近年来&#xff0c;随着全球化的加速和汽车市场的不断扩大&#xff0c;汽车维修领域的交流与合作也日益频繁。汽车维修类中译英的英语翻译在汽车行业中扮演着至关重要的角色。那么&#xff0c;针对汽车维修类翻译&#xff0c;中译英的英语翻译有何技巧&#xff1f; 业内人士指出…

Linux 系统解压缩文件

Linux系统&#xff0c;可以使用unzip命令来解压zip文件 方法如下 1. 打开终端&#xff0c;在命令行中输入以下命令来安装unzip&#xff1a; sudo apt-get install unzip 1 2. 假设你想要将zip文件解压缩到名为"target_dir"的目录中&#xff0c;在终端中切换到目标路…

C#/.NET/.NET Core拾遗补漏合集(24年4月更新)

前言 在这个快速发展的技术世界中&#xff0c;时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NET Core拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节&#xff0c;以帮助大家更全面地了解这些技术栈的特性和发展方向。 GitHub开源地…

Java中的单元测试Junit框架

单元测试 概述与以往的测试比较 Junit框架快速入门优点测试步骤断言机制 自动化测试 Junit框架常见注解 概述 针对最小的功能单元&#xff08;方法&#xff09;&#xff0c;编写测试代码对其进行正确性测试 与以往的测试比较 只能在main方法编写测试代码&#xff0c;去调用其…

Python实现PDF页面的删除与添加

在处理PDF文档的过程中&#xff0c;我们时常会需要对PDF文档中的页面进行编辑操作的情况&#xff0c;如插入和删除页面。通过添加和删除PDF页面&#xff0c;我们可以增加内容或对不需要的内容进行删除&#xff0c;使文档内容更符合需求。而通过Python实现PDF文档中的插入和删除…

微服务学习 Eureka注册中心

服务调用时候出现问题&#xff0c;当服务者很多时候&#xff0c;比如不同的端口。消费者如何找到服务者的地址&#xff1f;又如何判断服务者是否健康。 Eureka基本原理&#xff1a; 总结:如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f; 搭建Eureka注册中心: 1.…

LeetCode-72. 编辑距离【字符串 动态规划】

LeetCode-72. 编辑距离【字符串 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;动规五部曲解题思路二&#xff1a;动态规划【版本二】解题思路三&#xff1a;0 题目描述&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最…

找出mongodb的jumbo块并进行分裂

https://www.cnblogs.com/abclife/p/15968628.html 根据这篇文档中的脚本&#xff0c;在我们自己的环境中跑了下&#xff0c;第一次跑的结果如下&#xff1a; 运行完上面跑出的split脚本后&#xff0c;还是存在jumbo块&#xff0c;第二次跑出的结果&#xff1a; 从上面结果可以…

PostgreSQL15 + PostGis + QGIS安装教程

目录 下载1、PostgreSQL安装1.1、环境变量配置 2、PostGIS安装2.1、安装插件 3、QGIS下载3.1、安装3.2、测试 下载 PostgreSQL15安装&#xff1a;下载地址 PostGIS安装&#xff1a;下载地址&#xff08;倒数第二个&#xff09; 1、PostgreSQL安装 下载安装包之后一直点下一步…

Python 版分布式消息队列 Kafka 实现图片数据传输

1、Kafka 介绍 在使用 Kafka 之前&#xff0c;通常需要先安装和配置 ZooKeeper。ZooKeeper 是 Kafka 的依赖项之一&#xff0c;它用于协调和管理 Kafka 集群的状态。 ZooKeeper 是一个开源的分布式协调服务&#xff0c;它提供了可靠的数据存储和协调机制&#xff0c;用于协调…

清远某国企IBM服务器Board故障上门维修

接到一台来自广东清远市清城区某水利大坝国企单位报修一台IBM System x3650 M4服务器无法开机的故障&#xff0c;分享给大家&#xff0c;同时也方便有需要的朋友能及时找到我们快速解决服务器问题。 故障服务器型号&#xff1a;IBM System x3650 M4 服务器使用单位&#xff1a;…

厂区3D全景线上漫游体验突破现实时空阻碍

智慧园区&#xff0c;作为现代城市发展的重要引擎&#xff0c;其管理效率和安全监控的需求日益凸显。而720VR全景展示技术的引入&#xff0c;无疑为智慧园区的建设注入了新的活力。通过360全空间无死角的视觉展示&#xff0c;用户可以身临其境地感受园区的每一个角落&#xff0…

记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)

家庭记账本小程序目录 基于SSM的家庭记账本小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、小程序端&#xff1a; 2、后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大…

【opencv】示例-imagelist_reader.cpp 读取YAML格式文件中的图片列表,并逐个显示这些图片的灰度图...

这段代码的功能是使用OpenCV库读取一个YAML或XML格式文件中的图片列表&#xff0c;并且逐个地在窗口中以灰度图像的形式显示这些图片。用户可以按任意键来查看下一张图片。程序提供了帮助信息输出&#xff0c;指导用户如何使用该程序。此外&#xff0c;它使用命令行参数解析器来…

(文章复现)考虑网络动态重构的分布式电源选址定容优化方法

参考文献&#xff1a; [1]朱俊澎,顾伟,张韩旦,等.考虑网络动态重构的分布式电源选址定容优化方法[J].电力系统自动化,2018,42(05):111-119. 1.摘要 以投资周期经济收益最高为目标&#xff0c;基于二阶锥规划提出了一种考虑网络动态重构的分布式电源选址定容优化方法。首先&am…

毅四捕Go设计模式笔记——责任链模式

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 为了解决什么问题&#xff1f; 责任链模式的目的是为了将请求的发送者和接收者解耦。它允许多个处理器都有机会处理请求&#xff0c;将这些处理器连接成一条链&#xff0c;并沿着这条链传递请求&#xff…

Linux磁盘空间问题排查记录

问题 pip install时总提示OSError(28, ‘No space left on device’)或者ERROR: Could not install packages due to an OSError: [Errno 28] No space left on device 分析 很明显&#xff0c;磁盘空间不足。尝试了以下方法&#xff0c;没有解决问题&#xff1a; 清理pip缓…