vue学习笔记(购物车小案例)

用一个简单的购物车demo来回顾一下其中需要注意的细节。

先看一下最终效果

功能:

(1)全选按钮和下面的商品项的选中状态同步,当下面的商品全部选中时,全选勾选,反之,则不勾选。

(2)控制购物车商品数量,最低为1

(3)拥有小计和总计功能。其中,总计为勾选的商品所需要的总金额。

首先,先把静态页面写出来。

<template>
<div>
<h2>购物车</h2>
全选 <input type="checkbox" >
<div v-for="(item,index) in goods" :key="index">
<input type="checkbox" name="" id="" >--商品名:{{ item.name }}  --价格:{{ item.price }} 
<!-- 后端数据没有item.num,就使用或1的形式给所有商品默认的数量为1,这样就不用一个个在后端数据中加了 -->
--<button type="button" >+</button>{{item.num || 1}}<button  >-</button>
--小计:0
</div>
<div>总计:0</div>
</div></template>

上面的代码将静态页面写了出来,目前没有任何功能而。我们一一进行功能的添加。首先,实现简单的数量加减和小计。

思路:

现在存在两种情况,

第一,就是后端返回了商品数量,也就是item.num这个数据后端是直接给你的,然后我们直接进行使用即可。但是,实际的情况是后端返回的数量是这个商品的总库存,作为我们的购物车来说,一般默认的数量是为1的。所以,这里我们使用逻辑运算符的情况考虑了两种情况。

然后就是加一和减一,比较容易的方法就是直接给加和减分别绑定点击事件,分别进行加减,这里需要使用两个方法。这样的方法就不再介绍。不如换一个思路,让两个事件使用同一个事件,这样就少写了一个方法。

就是两者都是加,而减的操作是加-1.这样就可以合并为一个方法。

代码如下

updateNum(actionType,index){//初始化numthis.goods[index].num = this.goods[index].num||1//数量操作this.goods[index].num+=actionType},

解释一下,第一个参数就是传递过来的值,是加1,还是加-1,第二个值就是对应的索引,因为要对对应的商品进行数量加减操作,所以需要对应商品的索引。

首先,在考虑初始化num的时候,也要考虑num不存在的情况,

然后进行对应的数量操作即可。

那么我们的小计也就可以根据商品数量和价格进行计算了,注意:也要考虑数量不存在的情况。

对应的代码为:

<button type="button" @click="updateNum(1,index)">+</button>{{item.num || 1}}
<button   @click="updateNum(-1,index)">-</button>
--小计:{{(item.num ||1) *item.price}}
</div>

然后就是全选,商品单选,和总计的功能了。

首先进行全选实现,就是让全选的状态和商品单选进行同步。

我们首先定义全选的状态,默认是不选中的。( isAllSelected:false,)

 data(){return{isAllSelected:false,goods:[{name:"商品1",price:"100",// num:"1",},{name:"商品2",price:"200"},{name:"商品3",price:"300"}]}},

然后对应的给他添加change事件(注意,这里是change事件,并不是click)

全选 <input type="checkbox" :checked="isAllSelected" @change="allSelect">

使用动态绑定属性使他与 isAllSelected:的状态同步,然后写allSelect方法

allSelect(){this.isAllSelected=!this.isAllSelectedconsole.log(this.isAllSelected);//同步单选状态this.goods.forEach(item=>{item.select=this.isAllSelected})},

这里就是让他的状态和下面的商品列表的选择框进行同步,思路为:就是对下面的商品列表进行遍历,使用forEach方法,并将其状态赋值给每一项商品的选择状态。

然后就是当下面的每一项的商品取消选中时,那个全选的状态要进行改变。

这里用到另一个数组方法every

singleSelect(index){//修改当前单选商品状态this.goods[index].select=!this.goods[index].select//使用every方法循环数组,如果有一个select为false//整个结果为false 全部为true 整个结果为true//和我们单选联动 全选逻辑一致//直接使用返回值 赋给全选状态this.isAllSelected=this.goods.every(item=>item.select)}

最后就是总计了,这里的总计是将所有选中的商品进行金额的计算。

这里也是用到了两个数组方法,他们分别是filter和every。

<div>总计:{{ goods.filter(item=>item.select).reduce((total,item)=>total+=item.price*(item.num ||1),0) }}</div>

然后解释一下,这里首先使用filter方法将满足选中状态的商品进行过滤,返回的是一个数组,然后再将返回的数组使用累加方法reduce进行金额的计算。

完整代码附上:

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-06 16:18:52* @LastEditors: Mei* @LastEditTime: 2024-07-06 17:03:12* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\shopcar.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
<div>
<h2>购物车</h2>
全选 <input type="checkbox" :checked="isAllSelected" @change="allSelect">
<div v-for="(item,index) in goods" :key="index">
<input type="checkbox" name="" id="" :checked="item.select" @change="singleSelect(index)">--商品名:{{ item.name }}  --价格:{{ item.price }} 
<!-- 后端数据没有item.num,就使用或1的形式给所有商品默认的数量为1,这样就不用一个个在后端数据中加了 -->
--<button type="button" @click="updateNum(1,index)">+</button>{{item.num || 1}}<button   @click="updateNum(-1,index)">-</button>
--{{(item.num ||1) *item.price}}
</div>
<div>总计:{{ goods.filter(item=>item.select).reduce((total,item)=>total+=item.price*(item.num ||1),0) }}</div>
</div></template><script>
export default {data(){return{isAllSelected:false,goods:[{name:"商品1",price:"100",// num:"1",},{name:"商品2",price:"200"},{name:"商品3",price:"300"}]}},methods:{updateNum(actionType,index){//初始化numthis.goods[index].num = this.goods[index].num||1//数量操作this.goods[index].num+=actionType},allSelect(){this.isAllSelected=!this.isAllSelectedconsole.log(this.isAllSelected);//同步单选状态this.goods.forEach(item=>{item.select=this.isAllSelected})},singleSelect(index){//修改当前单选商品状态this.goods[index].select=!this.goods[index].select//使用every方法循环数组,如果有一个select为false//整个结果为false 全部为true 整个结果为true//和我们单选联动 全选逻辑一致//直接使用返回值 赋给全选状态this.isAllSelected=this.goods.every(item=>item.select)}}
}
</script><style></style>

通过这个案例,主要是复习一下vue的常见指令的使用,主要是数组方法的使用。这里,将使用的四个数组方法进行详细的介绍。

①forEach

forEach 是 JavaScript 中的一个数组方法,它允许你对数组中的每个元素执行一个函数。这个方法接受一个回调函数作为参数,这个回调函数会对数组中的每个元素执行一次。此外,forEach 方法不会返回一个新数组,它仅仅是对原数组的每个元素执行了提供的函数。

forEach 的基本语法如下:


array.forEach(function(currentValue, index, arr), thisArg)
参数说明:

currentValue:数组中正在处理的当前元素。
index(可选):数组中正在处理的当前元素的索引。
arr(可选):forEach() 方法正在操作的数组。
thisArg(可选):执行回调函数时用作 this 的对象。

上面是官方的介绍,但是在实际的使用中,用的最多的还是currentValue,偶尔也会用到index,这里用一个上次的案例进行效果演示。(主要是遍历数组,记住不会返回新数组就行了)

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-05 21:28:45* @LastEditors: Mei* @LastEditTime: 2024-07-06 17:39:19* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><div id="myList" v-for="(item,index) in arr" :key="index" @click="arrTest">{{ item.name }}</div></div></template><script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom,提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{data(){return{arr:[{name:"张三"},{name:"李四"},{name:"王五"}]}},methods:{arrTest(){this.arr.forEach((item,index)=>{console.log("我是每一项",item);console.log("我是每一项的索引",index);})}}
}</script><style scoped>
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
</style>

效果如下:

②every

every 是 JavaScript 中的一个数组方法,用于测试数组的所有元素是否都满足提供的函数中的测试条件。如果所有元素都通过测试,则返回 true;否则,返回 false。这个方法不会改变原数组,而是返回一个布尔值。

every 方法的基本语法如下:

array.every(function(currentValue, index, arr), thisArg)


参数说明:

currentValue:数组中正在处理的当前元素。
index(可选):数组中正在处理的当前元素的索引。
arr(可选):every 方法正在操作的数组。
thisArg(可选):执行回调函数时用作 this 的值。如果省略了 thisArg 参数,或者设为 null 或 undefined,则 this 会被视为全局对象。在严格模式下,如果省略或为 null 或 undefined,则 this 会是 undefined。

还是一个案例来演示:

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-05 21:28:45* @LastEditors: Mei* @LastEditTime: 2024-07-06 17:53:54* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><div id="myList" v-for="(item,index) in arr" :key="index" @click="arrTest">{{ item.name }}</div><div><button @click="arrTest2">点我看every{{ testEvery }}</button></div></div></template><script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom,提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{data(){return{testEvery:"",arr:[{name:"张三"},{name:"李四"},{name:"王五"}],arr2:[{age:10},{age:20},{age:30}]}},methods:{arrTest(){this.arr.forEach((item,index)=>{console.log("我是每一项",item);console.log("我是每一项的索引",index);})},arrTest2(){this.testEvery=this.arr2.every((item,index)=>{return item.age>5})}}
}</script><style scoped>
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
</style>

写一个按钮,当我们点击按钮的时候,就可以看到arrTest2返回的值,我们可以看到多了一个true,因为在执行every后,this.testEvery=true,对应页面的testEvery值也会进行显示。

③filter

filter 是 JavaScript 中的一个非常有用的数组方法,它创建一个新的数组,该数组包含通过测试函数的所有元素。换句话说,filter 方法会遍历原数组,对每个元素执行一个测试函数,如果该函数返回 true,则将该元素包含在新数组中。

filter 方法的基本语法如下:
let newArray = array.filter(function(currentValue, index, arr), thisArg)


参数说明:

currentValue:数组中正在处理的当前元素。
index(可选):数组中正在处理的当前元素的索引。
arr(可选):filter 方法正在操作的数组。
thisArg(可选):执行回调函数时用作 this 的值。
filter 方法返回一个新数组,该数组包含原数组中满足测试函数的元素。它不会改变原数组。

上代码

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-05 21:28:45* @LastEditors: Mei* @LastEditTime: 2024-07-06 18:03:11* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><div id="myList" v-for="(item,index) in arr" :key="index" @click="arrTest">{{ item.name }}</div><div><button @click="arrTest2">点我看Filter</button><div v-for="(item,index) in testFilter " :key=index>{{ item.age }}</div></div></div></template><script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom,提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{data(){return{testEvery:"",testFilter:"",arr:[{name:"张三"},{name:"李四"},{name:"王五"}],arr2:[{age:10},{age:20},{age:30}]}},methods:{arrTest(){this.arr.forEach((item,index)=>{console.log("我是每一项",item);console.log("我是每一项的索引",index);})},arrTest2(){this.testFilter=this.arr2.filter((item,index)=>{return item.age>15})console.log(this.testFilter);}}
}</script><style scoped>
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
</style>

当我点击按钮后,对应返回的新数组就会被渲染出来。

④reduce

reduce 是 JavaScript 中的一个数组方法,用于将数组中的所有元素通过某个函数(称为“reducer”函数)归并成一个单一的结果。这个方法会遍历数组中的每个元素,并使用 reducer 函数将其累积成一个单一的值。

reduce 方法的基本语法如下:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)


参数说明:

function(total, currentValue, currentIndex, arr): 这是 reducer 函数,它接受四个参数:
total(必需):初始值,或者计算结束后的返回值(累加器)。
currentValue(必需):当前元素。
currentIndex(可选):当前元素的索引。
arr(可选):当前元素所属的数组对象。
initialValue(可选):传递给函数的初始值。如果没有提供初始值,则将使用数组的第一个元素作为初始值,并从数组的第二个元素开始进行迭代。

上代码:

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-05 21:28:45* @LastEditors: Mei* @LastEditTime: 2024-07-06 18:11:41* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><div id="myList" v-for="(item,index) in arr" :key="index" @click="arrTest">{{ item.name }}</div><div><button @click="arrTest2">点我看Filter</button><div v-for="(item,index) in testFilter " :key=index>{{ item.age }}</div><button @click="arrTest3">点我看Reduce</button><!-- <div v-for="(item,index) in testFilter " :key=index>{{ item.age }}</div> --></div></div></template><script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom,提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{data(){return{testEvery:"",testFilter:"",testReduce:0,arr:[{name:"张三"},{name:"李四"},{name:"王五"}],arr2:[{age:10},{age:20},{age:30}]}},methods:{arrTest(){this.arr.forEach((item,index)=>{console.log("我是每一项",item);console.log("我是每一项的索引",index);})},arrTest2(){this.testFilter=this.arr2.filter((item,index)=>{return item.age>15})console.log(this.testFilter);},arrTest3(){this.testReduce=this.arr2.reduce((total,item)=>{return total+item.age},0)console.log(this.testReduce);}}
}</script><style scoped>
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
</style>

我的年龄数据为10,20,30,他们累加之后为60,如果在最后一项,我不是以0为初始值,更改为1后,累加的值就变成了61. 

 this.testReduce=this.arr2.reduce((total,item)=>{return total+item.age},0)

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

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

相关文章

51单片机嵌入式开发:2、STC89C52操作GPIO口LED灯

STC89C52操作GPIO口LED灯 1 芯片介绍1.1 芯片类型1.2 芯片系列说明 2 GPIO引脚寄存器说明3 GPIO操作3.1 GPIO输入3.2 GPIO输出3.3 GPIO流水灯3.4 Protues仿真 4 总结 1 芯片介绍 1.1 芯片类型 芯片采用宏晶科技品牌下的STC89C52RC单片机 选择STC89C52RC系列STC89C58RD系列单片…

Pycharm远程连接GPU(内容:下载安装Pycharm、GPU租借、配置SSH、将代码同步到镜像、命令行操控远程镜像、配置远程GPU解释器)

目录 windows下载安装pycharmGPU租借网站AutoDlfeaturize好易智算 GPU租借GPU选择选择镜像充值 然后创建镜像创建成功 复制SSH登录信息 远程进入镜像 在Pycharm中进行ssh连接新建SFTP配置SSH复制ssh根据复制的信息填写ssh配置测试连接 将代码同步到远程镜像上设置mappings将本地…

大语言模型与知识图谱结合发展方向

引言 在人工智能的发展历程中&#xff0c;大语言模型&#xff08;LLM&#xff09;的出现标志着一个重要的转折点。随着深度学习技术的突破和计算能力的提升&#xff0c;LLM以其前所未有的规模和复杂性&#xff0c;开启了迈向人工通用智能&#xff08;AGI&#xff09;的新浪潮。…

STM32利用FreeRTOS实现4个led灯同时以不同的频率闪烁

在没有接触到FreeRTOS时&#xff0c;也没有想过同时叫两个或两个以上的led灯闪烁的想法&#xff0c;接触后&#xff0c;发现如果想叫两个灯同时以不同的频率闪烁&#xff0c;不能说是不可能&#xff0c;就算是做到了也要非常的麻烦。但是学习了FreeRTOS后&#xff0c;发现要想同…

使用WinSCP工具连接Windows电脑与Ubuntu虚拟机实现文件共享传输

一。环境配置 1.首先你的Windows电脑上安装了VMware虚拟机&#xff0c;虚拟机装有Ubuntu系统&#xff1b; 2.在你的windows电脑安装了WinSCP工具&#xff1b; 3.打开WinSCP工具默认是这样 二。设置WinSCP连接 打开WinSCP&#xff0c;点击新标签页&#xff0c;进入到如下图的…

(杂文)参加WAIC 2024 所思所感

受华为广办的邀请&#xff0c;在领导要求下&#xff0c; 我还是在这个炎热的暑假通过一个接近凌晨两点落地的飞机连夜从北京来到了上海&#xff0c;去“睁眼看世界”。 区别于纯学术会议和CCF类的会议&#xff0c;WAIC 更加的平易近人&#xff0c;有更多的工业界同行&#xff…

【学术会议征稿】2024年工业自动化与机器人国际学术会议(IAR 2024)

2024年工业自动化与机器人国际学术会议&#xff08;IAR 2024&#xff09; 2024 International Conference on Industrial Automation and Robotics 2024年工业自动化与机器人国际学术会议&#xff08;IAR 2024&#xff09;将于2024年10月18-20日在新加坡隆重召开。会议将围绕…

三丰云评测:免费虚拟主机与免费云服务器的全面对比

三丰云是一家知名的互联网服务提供商&#xff0c;专注于虚拟主机和云服务器的服务。在互联网技术日新月异的今天&#xff0c;选择一个优质的云服务提供商至关重要。本次评测将重点对比三丰云的免费虚拟主机和免费云服务器&#xff0c;帮助用户更好地选择适合自己需求的服务。首…

0 TMS320F28379D 开坑

开坑原因 最近开始做实验&#xff0c;实验室的主控采用的是F2812FPGA&#xff0c;属于够用但不好用的状态。FPGA用于生成调制信号&#xff0c;DSP完成采样和控制。师兄师姐研究拓扑及调制策略&#xff0c;对驱动数量以及驱动逻辑有比较高的要求&#xff0c;因此不好脱离FPGA&a…

CVE-2023-30212(xss漏洞)

简介 OURPHP版本<7.2.0存在XSS漏洞&#xff0c;攻击路径为/client/manage/ourphp_out.php。 过程 打开靶场 访问攻击路径/client/manage/ourphp_out.php 得到flag{354c7c41-cc23-4de5-be73-79cbbf384aba}

Multisim仿真-交流数字电压表

下图为整体的原理框图&#xff0c;交流电源经过整流滤波电路转换后&#xff0c;送入模数转换电路&#xff0c;经译码给到显示电路&#xff0c;由其显示交流电源的有效值。 信号发生器XFG1输出正弦波信号(峰峰值)&#xff0c;XMM1测量有效值&#xff0c;U6数码管显示有效值。仿真…

Linux下python抓取动态网页内容

一、背景 现在大部分网站的数据都是异步加载的&#xff0c;直接抓取是没办法获取到你想要的数据。必须要借助浏览器(无头浏览器,下面会搭建这个环境)来加载其javascript渲染数据后&#xff0c;你所需要的数据这时才呈现。 二、环境搭建 1、Centos7 默认有 python2.7版本 查…

[BJDCTF 2nd]简单注入

sqlsqlsqlsqlsql又来喽 过滤了单双引号&#xff0c;等于符号&#xff0c;还有select等&#xff0c;但是这里没有二次注入 。扫描发现hint.txt 看出题人的意思是&#xff0c;得到密码即可获得flag。 select * from users where username$_POST["username"] and passw…

二叉树的顺序存储

目录 顺序存储&#xff1a; 简介&#xff1a; 节点的位置关系&#xff1a; 优缺点&#xff1a; 优点&#xff1a; 缺点&#xff1a; 二叉树顺序存储的模拟实现&#xff1a; 向上调整算法&#xff1a; 向下调整算法&#xff1a; 二叉树的初始化&#xff1a; 直接初始化…

spdlog一个非常好用的C++日志库(五): 源码分析之registry类

目录 1.registry类意义 2.registry类实现 2.1.registry数据成员 2.2.registry函数成员 2.2.1.构造与析构 2.2.2.单例模式 2.2.3.全局注册表 2.2.4.initialize_logger初始化logger对象 2.2.5.全局格式器 2.2.6.预置日志等级 2.2.7.flush日志等级 2.2.8.默认logger …

合并区间(python3)

合并区间 题目描述解题思路代码实现复杂度 题目描述 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示…

认识流式处理框架Apache Flink

目录 一、Apache Flink 的基础概念 1.1 Apache Flink是什么&#xff1f; 1.2 Flink的定义 二、Apache Flink 的发展史 2.1 Flink前身Stratosphere 2.2 Flink发展时间线及重大变更 三、Flink核心特性 3.1 批流一体化 3.2 同时支持高吞吐、低延迟、高性能 3.3 支持事件时…

Git 运用小知识

1.Git添加未完善代码的解决方法 1.1 Git只是提交未推送 把未完善的代码提交到本地仓库 只需点击撤销提交&#xff0c;提交的未完善代码会被撤回 代码显示未提交状态 1.2 Git提交并推送 把未完善的代码提交并推送到远程仓库 点击【未完善提交并推送】的结点选择还原提交&#x…

指定版本ceph-common安装

如&#xff0c;安装15.2.13的ceph-common PACKAGE_NAMEceph-common CEPH_VERSION15.2.13 wget -q -O- https://download.ceph.com/keys/release.asc | sudo apt-key add - echo deb http://download.ceph.com/debian-${CEPH_VERSION}/ $(lsb_release -sc) main | sudo tee …

关于学习方法的优化

这是一种新的学习方法&#xff0c;一种新的学习形式&#xff0c;可以通过歌唱的方式&#xff0c;运用&#xff0c;把自己每天要进行的内容进行一个复习&#xff0c;进行一个重复&#xff0c;这样可以实现随时随地进行一个学习&#xff0c;这样可以帮助快速走出来&#xff01; 您…