现实向购物车添加商品组件
代码
<template> <div class="cartcontrol"> <!--商品减一区域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品数量区域--> <div class="num" v-show="food.count>0">4</div> <!--商品加一区域--> <div class="add" @click="addCart"> <i class="icon-add_circle"></i> </div> </div> </template>
<script> export default { name: "Cartcontrol", props:{ food:{ type:Object } }, methods:{ //添加购物车商品数量 addCart(ele){ if(!ele._constructed){ //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个 // 属性区别_constructed,pc端浏览器的点击事件的event中是没有这个属性的 return; } //一开始food中是没有商品数量count if(!this.food.count){ // this.food.count = 1;count不是food对象中的属性,直接这样写,在dom渲染的时候是无法感应到count的变化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); } } } </script>
<style scoped lang="stylus"> .cartcontrol display flex height .48rem align-items center .num font-size.2rem width .48rem text-align center color rgb(147,153,159) .reduce,.add font-size .4rem color rgb(0,160,220) </style>
对象中添加新的属性,如果更新此属性的值,是不会更新视图的
addCart(ele){ if(!ele._constructed){ //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个 // 属性区别_constructed,pc端浏览器的点击事件的event中是没有这个属性的 return; } //一开始food中是没有商品数量count if(!this.food.count){ this.food.count = 1;count不是food对象中的属性,直接向food添加新属性count, // 当count值发生变化的时候在dom渲染的时候是无法感应到count的变化 }else{ this.food.count++; } console.log(this.food.count); }
解决方法:使用$set可以触发更新视图,这样当count发生变化的时候,$set去触发更新视图 addCart(ele){
if(!ele._constructed){ //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个 // 属性区别_constructed,pc端浏览器的点击事件的event中是没有这个属性的 return; } //一开始food中是没有商品数量count if(!this.food.count){ // this.food.count = 1;count不是food对象中的属性,直接向food添加新属性count, // 当count值发生变化的时候在dom渲染的时候是无法感应到count的变化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); }
总结
以上所述是小编给大家介绍的vue.js购物车添加商品组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 赵传2012-音乐武侠[引进版][WAV+CUE]
- 群星《宝丽金20周年特别发烧版》[WAV+CUE][480MB]
- 徐佳莹《徐佳莹歌曲合集》[FLAC/分轨][1014MB]
- 蔡琴《蔡琴经典歌曲合集》[WAV+CUE][502.6MB]
- 林志颖.1992-不是每个恋曲都有美好回忆(首专)【飞碟】【WAV+CUE】
- 群星.2020-一首歌一个故事(赵英俊某些作品重唱企划)【奔跑怪物】【FLAC+CUE】
- 戴军.1995-阿莲·新娘【大藏艺术】【WAV+CUE】
- [ABC唱片]-《吉姆·里夫斯-发烧精逊[HDS-257][6N纯银镀膜CD][低速原抓WAV+CUE]
- 【新世纪电子(P)】Beamy-2024-SunsetSerenades(FLAC)
- 古巨基2006-HUMAN我生2CD[香港][WAV整轨]
- 吴淑敏.1995-少女的期待【福和唱片】【WAV+CUE】
- 张栋梁.2008-FROM.NOW.ON新歌+精选2CD【维京】【WAV+CUE】
- 潘美辰.1995-原谅我改变(粤)【星光】【WAV+CUE】
- 半吨兄弟《迷人烟嗓》 [WAV+CUE][527.2MB]
- 孙燕姿《经典全纪录 主打精华版》[DSF][4G]