{{food.name}}
这里通过currentIndex
和index做对比,来确认是否添加current类,通过添加current类来实现当前页面的区域的样式变化,他们之间的对比关系也就是menu区域和foods区域的显示区域的对比关系
需要注意的是vue传递原生事件使用$event
购物车
{{selectFoods.length}}
购物车
清空
- {{food.name}}
¥{{food.price*food.count}}购物车列表的显示和隐藏以及清空按钮是通过数据fold来决定的,购物车列表是通过计算属性listshow来实现,清空按钮也是通过设置count属性来实现,这样都达到了不用操作dom就可以改变dom行为的效果。
操作按钮
这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮
{{food.count}}![]()
addCart以及decreaseCart方法,默认会传入event原生dom事件,food数据是从父组件传入的,所以对这个数据的修改,也能够反应到父组件,也因为购物车的数据也是从父组件传入的,使用同一个food数据,从而关联到购物车的购买数量统计。
异步问题
{{item[0].name}}
![]()
![]()
这里循环嵌套,整个DOM结构都是循环出来的,而
better-scroll
需要操作DOM结构,要实现横向滑动效果,难免会有异步问题。可是无论我使用.then或者
$nextTick
都无法挂载better-scroll
,查阅了大量文档也无法解决,最后只能使用原生的overflow-X
,若是有解决办法,欢迎提出,感激不尽!结语
总的来说这个项目还有很多不足,实现的功能也很少,后续我会继续改进。
如果这篇文章对你有帮助,不妨点个赞吧!
GitHub地址
总结
以上所述是小编给大家介绍的Vue实战教程之仿肯德基宅急送App,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
- Laravel 11.12版本发布 - Artisan的`make`命令自动剪切`.php `扩展(0个评论)
- golang支持托盘的程序模板:fyneMiniProgram-程序带图标,程序最小化到系统栏(0个评论)
- Laravel的轻量型购物车扩展包:binafy/laravel-cart(0个评论)
- 在go语言中使用http实现multipart/form-data文件上传,不加载文件到内存功能示例(0个评论)
- 2024.07.09日OpenAI将终止对中国等国家和地区API服务(0个评论)
- 在go语言中使用crypto/bcrypt实现用户密码非明文存储示例(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号
![]()