vue实现购物车简单的功能-单选全选总价计算、批量删除

最新推荐文章于 2024-04-27 09:42:37 发布

Mr_Baoge

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量6.6k

点赞数 7

分类专栏： vue 文章标签： vue 购物车单选全选批量删除

本文链接：https://blog.csdn.net/Mr_Baoge/article/details/87100427

版权

vue实现购物车简单的功能-----单选全选总价计算、批量删除等
观看了后盾人视频教学，视频里面对于全选和单选的功能没有讲全，于是自己研究了一下，前端小白,也是第一次写博客，有什么不足和可以优化的地方欢迎大佬指导一下！
效果截图：
在这里插入图片描述以下附上全部的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./vue.js"></script>
    <title>Title</title>
</head>
<script>
    window.onload = function () {
        new Vue({
            el: "#app",
            data: {
                //商品数据
                goods: [
                    {id: 1, name: '【详情页领券！到手价2099元起】Xiaomi/小米小米8年度旗舰全面屏骁', price: 2299.00, num: 1},
                    {id: 2, name: '【4+64G低至1299】Xiaomi/小米 小米8 青春版全面屏智能拍照游戏手机', price: 1299.00, num: 1},
                    {id: 3, name: '【爆款钜惠】Xiaomi/小米 6X智能AI双摄拍照学生老人青春手机小米8官方', price: 1299.00, num: 1},
                    {id: 4, name: '领券128G低至2429起/送手环现货Xiaomi/小米 小米8 手机正品官方旗舰', price: 2159.00, num: 1},
                    {id: 5, name: '【直降150领券再减50】Huawei/华为 畅享 8e 青春版 4G高清全面屏大屏全', price: 649.00, num: 1},
                    {id: 6, name: 'Huawei/华为 nova 4 自拍极点全面屏超广角三摄正品智能易烊千玺代言手', price: 3099.00, num: 1},
                    {id: 7, name: '【12期分期/顺丰速发/送壕礼】Huawei/华为 Mate 20 Pro中移动手机', price: 5399.00, num: 1},
                    {id: 8, name: '直降700当天发Huawei/华为 Mate 20 Pro保时捷手机降价mate20proX', price: 3488.00, num: 1},
                    {id: 9, name: 'Huawei/华为 P20 Pro全网通128g徕卡三摄全面屏6G运存手机正品64g', price: 2698.00, num: 1},
                    {id: 10, name: 'Huawei/华为 Mate 20 Pro翡冷翠璨星蓝mate20proUD手机馥蕾红现货', price: 5488.00, num: 1},
                    {id: 11, name: '【6期免息 赠一年碎屏险 】OPPO R17全面屏拍照手机AI智能屏幕指纹', price: 2799.00, num: 1}
                ],
                //控制全选
                allChecked:

最低0.47元/天解锁文章

Mr_Baoge

关注

7
点赞
踩
50

收藏

觉得还不错? 一键收藏
2
评论
vue实现购物车简单的功能-单选全选总价计算、批量删除

vue实现购物车简单的功能-----单选全选总价计算、批量删除等观看了后盾人视频教学，视频里面对于全选和单选的功能没有讲全，于是自己研究了一下，前端小白,也是第一次写博客，有什么不足和可以优化的地方欢迎大佬指导一下！效果截图：以下附上全部的代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta cha...
复制链接

扫一扫