网站招聘顾问做啥的,郴州网站建设推广方案,百度喜欢什么样的网站,网站搭建与生成技术教材用一个简单的购物车demo来回顾一下其中需要注意的细节。
先看一下最终效果
功能#xff1a;
#xff08;1#xff09;全选按钮和下面的商品项的选中状态同步#xff0c;当下面的商品全部选中时#xff0c;全选勾选#xff0c;反之#xff0c;则不勾选。
#xff08…用一个简单的购物车demo来回顾一下其中需要注意的细节。
先看一下最终效果
功能
1全选按钮和下面的商品项的选中状态同步当下面的商品全部选中时全选勾选反之则不勾选。
2控制购物车商品数量最低为1
3拥有小计和总计功能。其中总计为勾选的商品所需要的总金额。 首先先把静态页面写出来。
template
div
h2购物车/h2
全选 input typecheckbox
div v-for(item,index) in goods :keyindex
input typecheckbox name id --商品名{{ item.name }} --价格{{ item.price }}
!-- 后端数据没有item.num,就使用或1的形式给所有商品默认的数量为1这样就不用一个个在后端数据中加了 --
--button typebutton /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].numactionType},
解释一下第一个参数就是传递过来的值是加1还是加-1第二个值就是对应的索引因为要对对应的商品进行数量加减操作所以需要对应商品的索引。
首先在考虑初始化num的时候也要考虑num不存在的情况
然后进行对应的数量操作即可。
那么我们的小计也就可以根据商品数量和价格进行计算了注意也要考虑数量不存在的情况。
对应的代码为
button typebutton clickupdateNum(1,index)/button{{item.num || 1}}
button clickupdateNum(-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 typecheckbox :checkedisAllSelected changeallSelect
使用动态绑定属性使他与 isAllSelected:的状态同步然后写allSelect方法
allSelect(){this.isAllSelected!this.isAllSelectedconsole.log(this.isAllSelected);//同步单选状态this.goods.forEach(item{item.selectthis.isAllSelected})},
这里就是让他的状态和下面的商品列表的选择框进行同步思路为就是对下面的商品列表进行遍历使用forEach方法并将其状态赋值给每一项商品的选择状态。 然后就是当下面的每一项的商品取消选中时那个全选的状态要进行改变。
这里用到另一个数组方法every
singleSelect(index){//修改当前单选商品状态this.goods[index].select!this.goods[index].select//使用every方法循环数组如果有一个select为false//整个结果为false 全部为true 整个结果为true//和我们单选联动 全选逻辑一致//直接使用返回值 赋给全选状态this.isAllSelectedthis.goods.every(itemitem.select)}
最后就是总计了这里的总计是将所有选中的商品进行金额的计算。
这里也是用到了两个数组方法他们分别是filter和every。
div总计{{ goods.filter(itemitem.select).reduce((total,item)totalitem.price*(item.num ||1),0) }}/div
然后解释一下这里首先使用filter方法将满足选中状态的商品进行过滤返回的是一个数组然后再将返回的数组使用累加方法reduce进行金额的计算。 完整代码附上
!--* Author: RealRoad1083425287qq.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 typecheckbox :checkedisAllSelected changeallSelect
div v-for(item,index) in goods :keyindex
input typecheckbox name id :checkeditem.select changesingleSelect(index)--商品名{{ item.name }} --价格{{ item.price }}
!-- 后端数据没有item.num,就使用或1的形式给所有商品默认的数量为1这样就不用一个个在后端数据中加了 --
--button typebutton clickupdateNum(1,index)/button{{item.num || 1}}button clickupdateNum(-1,index)-/button
--{{(item.num ||1) *item.price}}
/div
div总计{{ goods.filter(itemitem.select).reduce((total,item)totalitem.price*(item.num ||1),0) }}/div
/div/templatescript
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].numactionType},allSelect(){this.isAllSelected!this.isAllSelectedconsole.log(this.isAllSelected);//同步单选状态this.goods.forEach(item{item.selectthis.isAllSelected})},singleSelect(index){//修改当前单选商品状态this.goods[index].select!this.goods[index].select//使用every方法循环数组如果有一个select为false//整个结果为false 全部为true 整个结果为true//和我们单选联动 全选逻辑一致//直接使用返回值 赋给全选状态this.isAllSelectedthis.goods.every(itemitem.select)}}
}
/scriptstyle/style
通过这个案例主要是复习一下vue的常见指令的使用主要是数组方法的使用。这里将使用的四个数组方法进行详细的介绍。
①forEach
forEach 是 JavaScript 中的一个数组方法它允许你对数组中的每个元素执行一个函数。这个方法接受一个回调函数作为参数这个回调函数会对数组中的每个元素执行一次。此外forEach 方法不会返回一个新数组它仅仅是对原数组的每个元素执行了提供的函数。
forEach 的基本语法如下 array.forEach(function(currentValue, index, arr), thisArg) 参数说明
currentValue数组中正在处理的当前元素。 index可选数组中正在处理的当前元素的索引。 arr可选forEach() 方法正在操作的数组。 thisArg可选执行回调函数时用作 this 的对象。
上面是官方的介绍但是在实际的使用中用的最多的还是currentValue偶尔也会用到index这里用一个上次的案例进行效果演示。主要是遍历数组记住不会返回新数组就行了
!--* Author: RealRoad1083425287qq.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.
--
templatedivdiv idmyList v-for(item,index) in arr :keyindex clickarrTest{{ item.name }}/div/div/templatescript
//列表渲染
//为什么循环的时候需要加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);})}}
}/scriptstyle 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: RealRoad1083425287qq.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.
--
templatedivdiv idmyList v-for(item,index) in arr :keyindex clickarrTest{{ item.name }}/divdivbutton clickarrTest2点我看every{{ testEvery }}/button/div/div/templatescript
//列表渲染
//为什么循环的时候需要加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.testEverythis.arr2.every((item,index){return item.age5})}}
}/scriptstyle scoped
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
/style
写一个按钮当我们点击按钮的时候就可以看到arrTest2返回的值我们可以看到多了一个true因为在执行every后this.testEverytrue对应页面的testEvery值也会进行显示。 ③filter
filter 是 JavaScript 中的一个非常有用的数组方法它创建一个新的数组该数组包含通过测试函数的所有元素。换句话说filter 方法会遍历原数组对每个元素执行一个测试函数如果该函数返回 true则将该元素包含在新数组中。
filter 方法的基本语法如下 let newArray array.filter(function(currentValue, index, arr), thisArg) 参数说明
currentValue数组中正在处理的当前元素。 index可选数组中正在处理的当前元素的索引。 arr可选filter 方法正在操作的数组。 thisArg可选执行回调函数时用作 this 的值。 filter 方法返回一个新数组该数组包含原数组中满足测试函数的元素。它不会改变原数组。
上代码
!--* Author: RealRoad1083425287qq.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.
--
templatedivdiv idmyList v-for(item,index) in arr :keyindex clickarrTest{{ item.name }}/divdivbutton clickarrTest2点我看Filter/buttondiv v-for(item,index) in testFilter :keyindex{{ item.age }}/div/div/div/templatescript
//列表渲染
//为什么循环的时候需要加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.testFilterthis.arr2.filter((item,index){return item.age15})console.log(this.testFilter);}}
}/scriptstyle 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: RealRoad1083425287qq.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.
--
templatedivdiv idmyList v-for(item,index) in arr :keyindex clickarrTest{{ item.name }}/divdivbutton clickarrTest2点我看Filter/buttondiv v-for(item,index) in testFilter :keyindex{{ item.age }}/divbutton clickarrTest3点我看Reduce/button!-- div v-for(item,index) in testFilter :keyindex{{ item.age }}/div --/div/div/templatescript
//列表渲染
//为什么循环的时候需要加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.testFilterthis.arr2.filter((item,index){return item.age15})console.log(this.testFilter);},arrTest3(){this.testReducethis.arr2.reduce((total,item){return totalitem.age},0)console.log(this.testReduce);}}
}/scriptstyle scoped
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
/style 我的年龄数据为10,20,30,他们累加之后为60如果在最后一项我不是以0为初始值更改为1后累加的值就变成了61. this.testReducethis.arr2.reduce((total,item){return totalitem.age},0)
