Vue实现购物车全选及价格计算

最新推荐文章于 2024-05-11 17:09:17 发布
最新推荐文章于 2024-05-11 17:09:17 发布
阅读量2.8k 收藏 17
点赞数
分类专栏： Vue HTML
原文链接：https://blog.csdn.net/yipanhuasheng/article/details/82732105#commentBox
版权
Vue 同时被 2 个专栏收录
36 篇文章 2 订阅
订阅专栏
HTML
6 篇文章 1 订阅
订阅专栏

《vuejs实战》这本书中5.5是一道实战题：利用计算属性、指令等知识开发购物车。

练习1：在当前示例基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。

练习2：将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品” “生活用品” 和“果蔬”，同类商品聚合在一起。提示，你可能会用到两次v-for。

1、购物车 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            padding: 10px;
        }
        th, td{
            border: 1px solid #e9e9e9;
            text-align: left;
            padding: 10px;
        }
        th{
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th>
                            <span>全选</span>
                            <input type="checkbox" @click="checkedAll(),checkModel()" v-model="checked">
                        </th>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td>
                            <input type="checkbox" :value="item.id" v-model="checkBoxModel" @click.stop="onlyChecked(index),checkPick()"> 
                        </td>
                        <td>{{ index + 1}}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button @click="handleReduce(index)" :disable="item.count === 1">-</button>
                            {{ item.count }}
                            <button @click="handleAdd(index)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div style="margin-top: 20px;">总价：￥{{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    id: 1,
                    name: '《我喜欢你，像风走了八千里》',
                    price: 24,
                    count: 1,
                    checked: false
                },
                {
                    id: 2,
                    name: '《余生很长，别慌张，别失望》',
                    price: 25.2,
                    count:1,
                    checked: false
                },
                {
                    id:3,
                    name:'《不堪孤独，就无法脱离庸俗》',
                    price: 23.8,
                    count:1,
                    checked: false
                }
            ],
            checkBoxModel: [],
            checked: false
        },
        computed: {
            totalPrice: function () {
                var total = 0;
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].checked) {
                        var item = this.list[i];
                        total += item.price * item.count;
                    }
                }
                return total.toFixed(2);
            }
        },
        methods: {
            handleReduce: function (index) {
                if (this.list[index].count === 1) return;
                this.list[index].count--;
            },
            handleAdd: function (index) {
                this.list[index].count++;
            },
            handleRemove: function (index) {
                this.list.splice(index, 1);
            },
            //全选的实现通过checkBoxModel的状态
            checkedAll: function () {
                var _this = this;
                if (_this.checked) {
                    _this.checkBoxModel = [];
                    _this.checked = false;
                } else {
                    _this.checkBoxModel = [];
                    _this.list.forEach(function (item) {
                        _this.checkBoxModel.push(item.id);
                    });
                    _this.checked = true;
                }
            },
            //单选的实现依靠的是checked通过click的切换实现
            onlyChecked: function (index) {
                if (this.list[index].checked) {
                    this.list[index].checked = false;
                } else {
                    this.list[index].checked = true;
                }
            },
            // 从遍历单个，若全部选中则全选按钮选中
            checkPick: function () {
                me = this;
                var checkedSum = 0;
                for (var i = 0; i < me.list.length; i++) {
                    if (me.list[i].checked) {
                        checkedSum++;
                    }
                }
                if (checkedSum == me.list.length) {
                    me.checked = true;
                } else {
                    me.checked = false;
                }
            },
            //计算价格
            checkModel: function () {
                me = this;
                if (me.checkBoxModel.length) {
                    newArr = me.checkBoxModel.concat();
                    // console.log(newArr);
                    // console.log(me.checkBoxModel);
                    for (var i = 0; i < me.checkBoxModel.length; i++) {
                        newone = newArr.shift().toString();
                        console.log(newone);
                        me.list[newone - 1].checked = true;
                    }
                } else {
                    newArr = me.checkBoxModel.concat();
                    // console.log(newArr);
                    for (var i = 0; i < me.list.length; i++) {
                        me.list[i].checked = false;
                    }
                }
                // 利用checkBoxModel的绑定的状态来分别给每个物品确认checked的状态，避免与onlyChecked的冲突
            }
        }
    });
    </script>
</body>
</html>

2、二维数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }
        th, td{
            border: 1px solid #e9e9e9;
            text-align: left;
            padding: 5px;
        }
        th{
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th>
                            <span>全选</span>
                            <input type="checkbox" @click="allPick(),checkModel()" v-model="checked">
                        </th>
                        <th>类型</th>
                        <th>商品名称</th>
                        <th>编号</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(item1, index) in list">
                        <tr>
                            <tr v-for="(initem, inindex) in item1">                       
                                <td>
                                    <input type="checkbox" :value="initem.id" v-model="checkBoxModel" @click.stop="pickOne(index, inindex),checkPick()">
                                </td>
                                <td>{{ num(index) }}</td>
                                <td>{{ initem.id }}</td>
                                <td>{{ initem.name }}</td>
                                <td>{{ initem.price }}</td>
                                <td>
                                    <button @click="handleReduce(index, inindex)" :disable="initem.count === 1">-</button>
                                        {{ initem.count }}
                                    <button @click="handleAdd(index, inindex)">+</button>
                                </td>
                                <td>
                                    <button @click="handleRemove(index, inindex)">移除</button>
                                </td>
                            </tr>
                        </tr>
                    </template>
                </tbody>
            </table>
            <div>总价：￥{{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                list: [
                    [{
                        id: 1,
                        name: 'iphone 7',
                        price: '6188',
                        count: 1,
                        isBuy: false,
                        cls: 'Eletronic Products'
                    }, {
                        id: 2,
                        name: 'ipad Pro',
                        price: '5888',
                        count: 1,
                        isBuy: false
                    }, {
                        id: 3,
                        name: 'macbook pro',
                        price: '21488',
                        count: 1,
                        isBuy: false
                    }],
                    [{
                        id: 4,
                        name: 'T-shirt',
                        price: '150',
                        count: 1,
                        isBuy: false,
                        cls: '生活用品'
                    }, {
                        id: 5,
                        name: 'cup',
                        price: '10',
                        count: 2,
                        isBuy: false
                    }, {
                        id: 6,
                        name: 'dish',
                        price: '30',
                        count: 1,
                        isBuy: false
                    }],
                    [{
                        id: 7,
                        name: 'apple',
                        price: '3',
                        count: 5,
                        isBuy: false,
                        cls: '农产品'
                    }, {
                        id: 8,
                        name: 'watermelon',
                        price: '15',
                        count: 1,
                        isBuy: false
                    }, {
                        id: 9,
                        name: 'cabbage',
                        price: '5',
                        count: 1,
                        isBuy: false
                    }]
                ],
                checkBoxModel: [],
                checked: false
            },
            computed: {
                totalPrice: function () {
                    var total = 0;           
                    for (var i = 0; i < this.list.length; i++) {
                        for (var j = 0; j < this.list[i].length; j++) {
                            var itemp = this.list[i][j];
                            if (itemp.isBuy) {
                                total += itemp.price * itemp.count;
                            }
                        }
                    }
                    return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
                }
            },
            methods: {
                handleReduce: function (index, inindex) {
                    if (this.list[index][inindex].count === 1) return;
                    this.list[index][inindex].count--;
                },
                handleAdd: function (index, inindex) {
                    this.list[index][inindex].count++;
                },
                handleRemove: function (index, inindex) {
                    this.list[index].splice(inindex, 1);
                },
                allPick: function () {
                    var _this = this;
                    if (_this.checked) {
                        _this.checkBoxModel = [];
                        _this.checked = false;
                    } else {
                        _this.checkBoxModel = [];
                        for (var i = 0; i < _this.list.length; i++) {
                            _this.list[i].forEach(function (item) {
                                _this.checkBoxModel.push(item.id);
                            });
                        }
                        _this.checked = true;
                    }
                },
                pickOne: function (index, inindex) {
                    if (this.list[index][inindex].isBuy) {
                        this.list[index][inindex].isBuy = false;
                    } else {
                        this.list[index][inindex].isBuy = true;
                    }
                },
                checkPick: function () {
                    _this = this;
                    var sumPic = 0;
                    var alength = 0;
                    for (var i = 0; i < _this.list.length; i++) {
                        for (var j = 0; j < _this.list[i].length; j++) {
                            if (_this.list[i][j].isBuy) {
                                sumPic++;
                            }
                        }
                        alength += _this.list[i].length
                    }
                    if (sumPic == alength) {
                        _this.checked = true;
                        console.log('all pick');
                    } else {
                        _this.checked = false;
                    }
                },
                num: function (index) {
                    for (var j = 0; j < this.list.length; j++) {
                        if (index === j) {
                            return this.list[j][0].cls;
                        }
                    }
                },
                checkModel: function () {
                    _this = this;
                    if (_this.checkBoxModel.length) {
                        newArr = _this.checkBoxModel.concat();
                        //console.log(newone);
                        for (var i = 0; i < _this.list.length; i++) {
                            for (var j = 0; j < _this.list[i].length; j++) {
                                var newone = newArr.shift();
                                if (_this.list[i][j].id === newone) {
                                    _this.list[i][j].isBuy = true;
                                }
                            }
                        }
                    } else {
                        for (var i = 0; i < _this.list.length; i++) {
                            for (var j = 0; j < _this.list[i].length; j++) {
                                _this.list[i][j].isBuy = false;
                            }
                        }
                    }
                }
            },
            created() {
                _this = this;
                _this.checkModel();
                console.log(_this.list[1][2].name);
            }
        });
    </script>
</body>
</html>

 

年轻即出发
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 循环勾选框_vue通过循环出来的购物车列表，计算复选框中选中的商品来计算的商品的总价...
weixin_39887925的博客
12-22 1038
vue中的购物车功能，通过循环将购物车列表循环出来，每个商品前都有一个单选按钮，怎样在循环中通过绑定一个事件，来计算选中的商品，计算选中商品的总价？本文将介绍逻辑+具体代码逻辑：1.首先应该为循环出来商品列表的单选框绑定一个事件。2.点击单选框时，应该找到所有的单选框。3.需要在data中定义一个数组，用于存放选中商品的下表，(也就是循环商品列表的下标)。4.每次点击单选按钮的时候，就要获取该下标...
Vue的computed属性，实时计算全选与选中的金额
mx_is_bang的博客
03-21 1807
Vue中computed是属性调用，以属性访问的形式调用的，{{computedTest}} 带有缓存功能 computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值 computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对...
【VUE3】保姆级基础讲解（二）计算属性，vue组件，vue-cli脚手架，组件通讯，插槽slot
qq_54517101的博客
12-11 746
具体是体现在的编译模式，如果直接在 main.js文件中书写App，则在编译时需要用到源码的 compile ，所以必须用第二种。这里需要注意的是style，当我们设置了一个样式，我们希望这个样式只在这个组件内生效，也就是说这个样式只在这个 .vue文件生效，即有自己的。如果在.vue文件中书写App，webpack在打包的时候就会直接编译，不会用到VUE源码，所有第一个就可以。也就是父组件传递给子组件一些数据，但是在子组件中的Props属性中没有进行设置。
Vue3-购物车列表-单选和全选功能实现
最新发布
weixin_57334661的博客
05-11 433
/ 通过skuId找到要修改的那一项 然后把它的selected 修改为传过来的selected。1. 操作单选决定全选：只有当cartList中的所有项都为true时，全选状态才为true。2. 操作全选决定单选：cartList中的所有项的selected都要跟着一起变。// 把cartList 中每一项的selected都设置为当前的全选状态。// store 中 cartList 数组无法知道要修改谁的选中状态。// 除了 selected 补充一个用来筛选的参数 - skuId。
利用computed计算属性写购物车商品计算价格 （会用到数组的方法reduce做聚合操作）
lzfengquan的博客
08-18 1325
<div id="app"> <h1>购物车</h1> <input type="checkbox" v-model="checkedAll" />全选 <ul> <li v-for="product in products"> <input type="checkbox" v-model="product.checked" />{{prod...
Vue购物车全选、反选——单选全部选中、全选自动选中以及总价
A_gyb的博客
09-10 2857
1.模拟购物车数据 data() { return { //模拟购物车数据arr arr:[ { ischeck:false, //默认为false name:'篮球', price:98 }, { ischeck:false, //默认为false name:'足球', price:10
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
apicloud中vue处理购物车全选单选
01-15
使用vue在apicloud实现 购物车的全选单选 只要是拿一个字段作区分 那他去作区分 最麻烦的就是ios不能全选 但是我是经过api.systemType 做过处理 ios和安卓的区分 <input class="aui-radio" v-model="vo.is_...
vue实现购物车结算功能
10-15
主要介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+vant-UI框架实现购物车的复选框全选和反选功能
12-30
购物车页面的设计图 商品的列表 代码： (item,index) shoppingListData.rows :key=index > :value=item.goods_id v-model item.isChecked checked-color=#07c160 @click> <div
vue实现购物车列表
10-15
在本示例中，我们看到一个使用Vue.js框架实现的购物车列表。Vue.js是一个流行的JavaScript库，用于构建用户界面，特别适合构建单页应用程序（SPA）。以下是对这个购物车列表实现的关键知识点的详细说明： 1. **Vue...
购物车价格自动计算
12-23
session保存数据结算，无刷新效果，添加删除，添加购物车
（六）Vue项目——微商城：实现购物车结算信息、商品数量加减
m0_71824048的博客
05-31 2811
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
vue简单的金额计算
努力变好
10-30 2156
2、功能说明：输入单价和件数点击其他地方输出总金额。3、代码（vue.js的引入地址目录记得改~~）
使用vue.js创建一个购物车车的小demo（数量增加，数量总计，价格求和）
qq_74991857的博客
03-18 921
总价: {{allPrice}} 元总数量: {{allNum}} 件购物车
vue2.0 computer计算 水果搜索与案例购物车
promise466的博客
09-24 950
vue2.0 中的computer方法简洁的实现了购物车和搜索的功能
Web前端vue必做笔记之一:组合api实现水果列表
qq_42302014的博客
11-16 1050
Web前端vue必做笔记之一:组合api实现水果列表 我们要实现这种功能 <template> <h1>水果列表</h1> <form @submit.prevent="insert"> <div> <label for="">名称：</label> <input type="text" v-model="name"&
Vue + Element UI｜可随商品单价和数量实时更新总价的表格
weixin_44589540的博客
11-12 5090
引入Element UI可参考文章 如何在Vue项目引入Element UI Element UI官网 效果 编辑表格中的单价和采购数量，总金额、商品总价、合计金额可以同步变化。点击测试按钮在控制台打印表格数据源tableData也同步更新。 源代码 <template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="
Vue实现计算商品总价简单案例
qq_44759859的博客
09-01 8330
计算商品总价简单案例-Vue 练习vue的指令和计算属性的一个小案例。 主要效果： 数量增加和减少，小于1不可操作 删除操作 任何加、减、删除操作都会更新总价 商品全删除后显示提示 代码： <body> <div id="app"></div> <template id="myapp"> <table border="1" v-show="isShow"> <tr>
给我写一个vue的购物车有全选和计算商品价格
07-20
以下是一个带有全选和计算商品价格功能的Vue购物车示例： HTML部分： ```html 购物车 全选 <input type="checkbox" v-model="item.selected" @change="updateTotalPrice"> {{ item.name }} - {{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值