Vue.js 2.0 完成购物车

需求：
购物车需要展示一个己加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作
等信息，还需要实时显示购买的总价。还需要增加一个全选和选中该产品的功能，总价需要显示购选中的商品的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。

简易版

效果如下：

这里需要准备三个文件index.html, index.js,style.css
贴代码(这里用的语法糖 @ 代表 v-on)

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" v-model="all_checked" @click="chooseAll()"></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" @click="chooseCurrent(index)" v-model="item.checked"></td>
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
                        {{ item.count }}
                        <button @click="handleAdd(index)">+</button>
                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>总价：￥ {{ totalPrice_format}}</div>
    </template>
    <div v-else>购物车为空</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js
var app = new Vue({
    el: '#app',
    data:{
        list:[
            {
                id: 1,
                name: 'iPhone 7',
                price: 61888,
                count: 100,
                checked: false
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1,
                checked: false
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1,
                checked: false
            }
        ],
        all_checked: false,
        totalPrice: 0,
        totalPrice_format: 0
    },
    methods: {
        handleReduce: function (index) {
            if(this.list[index].count === 1) return;
            this.list[index].count --;
            if( this.list[index].checked )  {
                this.totalPrice -= this.list[index].price * 1;
                this.totalPrice_format = this.totalPrice.toString().replace(/\B(?=(\d{3})+$)/g,',');
             }
        },
        handleAdd: function (index) {
            this.list[index].count ++;
            this.totalPrice -= this.list[index].price * 1;
            this.totalPrice_format = this.totalPrice.toString().replace(/\B(?=(\d{3})+$)/g,',');
            if( this.list[index].checked )  {
                this.totalPrice -= this.list[index].price * 1;
                this.totalPrice_format = this.totalPrice.toString().replace(/\B(?=(\d{3})+$)/g,',');
             }
        },
        handleRemove: function (index) {
            if( this.list[index].checked ){
                this.totalPrice -= this.list[index].count * this.list[index].price;
                this.totalPrice_format = this.totalPrice.toString().replace(/\B(?=(\d{3})+$)/g,',');
            }
            this.list.splice(index,1); 
        },
        chooseCurrent: function (index) {
            var item = this.list[index];
            item.checked = item.checked ? false : true;
            if( item.checked ){
                this.totalPrice += item.count * item.price;
                var total_checked = true;
                for( var i = 0; i < this.list.length; i++ ){
                    var item = this.list[i];
                    if( !item.checked ){
                        total_checked = false;
                        break;
                    }
                }

                if( total_checked ){
                    this.all_checked = true;
                }else{
                    this.all_checked = false;
                }
            }else{
                this.totalPrice -= item.count * item.price;
                this.all_checked = false;
            }
            this.totalPrice_format = total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        },
        chooseAll: function () {
            this.all_checked = this.all_checked ? false : true;
            this.totalPrice = 0;
            if( this.all_checked ){
                for( var i = 0; i < this.list.length; i++ ){
                    var item = this.list[i];
                    this.totalPrice += item.price * item.count;
                    item.checked = true;
                }
            }else{
                for( var i = 0; i < this.list.length; i++ ){
                    var item = this.list[i];
                    item.checked = false;
                }
            }
            this.totalPrice_format = this.totalPrice.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    }
});

style.css
[v-cloak]{
    display:none;
}
table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells:show;
}
th,td{
    padding:8px 16px;
    border:1px solid #e9e9e9;
    text-align: left;
}
th{
    background: #f7f7f7;
    color:#5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

遍历二维数组

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th><input type="checkbox" v-model="all_checked" @click="chooseAll()"></th>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>商品类别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <template v-for="(parent,index) in list">
                    <tr v-for="(child,childindex) in parent">
                        <td><input type="checkbox" @click="chooseCurrent(index,childindex)" v-model="child.checked"></td>
                        <td>{{ child.id }}</td>
                        <td>{{ child.name }}</td>
                        <td>{{ child.price }}</td>
                        <td>
                            <button @click="handleReduce(index,childindex)" :disabled="child.count === 1">-</button>
                            {{ child.count }}
                            <button @click="handleAdd(index,childindex)">+</button>
                        </td>
                        <td>{{ child.category }}</td>
                        <td>
                            <button @click="handleRemove(index,childindex)">移除</button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
        <div>总价：￥ {{ totalPrice }}</div>
    </template>
    <div v-else>购物车为空</div>
</div>
<script src="../../Vue/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js
var app = new Vue({
    el: '#app',
    data:{
        list:[
            [
                {
                    id: 1,
                    name: 'iPhone 7',
                    price: 61888,
                    count: 100,
                    checked: false,
                    category: '电子商品'
                },
                {
                    id: 2,
                    name: 'iPad Pro',
                    price: 5888,
                    count: 1,
                    checked: false,
                    category: '电子商品'
                },
                {
                    id: 3,
                    name: 'MacBook Pro',
                    price: 21488,
                    count: 1,
                    checked: false,
                    category: '电子商品'
                }
            ],
            [
                {
                    id: 4,
                    name: '毛巾',
                    price: 10.9,
                    count: 100,
                    checked: false,
                    category: '生活用品'
                },
                {
                    id: 5,
                    name: '纸巾',
                    price: 29.99,
                    count: 10,
                    checked: false,
                    category: '生活用品'
                },
                {
                    id: 6,
                    name: '地毯',
                    price: 299.99,
                    count: 1,
                    checked: false,
                    category: '生活用品'
                }
            ],
            [
                {
                    id: 7,
                    name: '苹果',
                    price: 10.9,
                    count: 100,
                    checked: false,
                    category: '果蔬'
                },
                {
                    id: 8,
                    name: '美国进口橙子',
                    price: 15,
                    count: 10,
                    checked: false,
                    category: '果蔬'
                },
                {
                    id: 9,
                    name: '智利进口樱桃',
                    price: 59.9,
                    count: 1,
                    checked: false,
                    category: '果蔬'
                }
            ]
        ],
        all_checked: false,
        totalPrice: 0,
        totalPrice_format: 0
    },
    methods: {
        handleReduce: function (index,childindex) {
            if(this.list[index][childindex].count === 1) return;
            this.list[index][childindex].count --;
            console.log(this.list[index][childindex].price);
            if( this.list[index][childindex].checked ){
                this.totalPrice -= this.list[index][childindex].price;
                this.totalPrice_format = this.totalPrice.toFixed(2).toString().replace(/\B(?=(\d{3})+$)/g,',');
            }
        },
        handleAdd: function (index,childindex) {
            this.list[index][childindex].count ++;
            if( this.list[index][childindex].checked ){
                console.log(this.totalPrice);
                this.totalPrice += this.list[index][childindex].price;
                this.totalPrice_format = this.totalPrice.toFixed(2).toString().replace(/\B(?=(\d{3})+$)/g,',');
            }
        },
        handleRemove: function (index,childindex) {
            if( this.list[index][childindex].checked ){
                this.totalPrice -= this.list[index][childindex].count * this.list[index][childindex].price;
            }
            this.list[index].splice(childindex,1);
            this.totalPrice_format = this.totalPrice.toFixed(2).toString().replace(/\B(?=(\d{3})+$)/g,',');
        },
        chooseCurrent: function (index,childindex) {
            var item = this.list[index][childindex];
            item.checked = item.checked ? false : true;
            if( item.checked ){
                this.totalPrice += item.count * item.price;
                var total_checked = true;
                for( var i = 0; i < this.list.length; i++ ){
                    var v = this.list[i];
                    for( var j = 0; j < v.length; j++ ){
                        var product = v[j];
                        if( !product.checked ){
                            total_checked = false;
                            break;
                        }
                    }
                }

                if( total_checked ){
                    this.all_checked = true;
                }else{
                    this.all_checked = false;
                }
            }else{
                this.totalPrice -= item.count * item.price;
                this.all_checked = false;
            }
            this.totalPrice_format = this.totalPrice.toFixed(2).toString().replace(/\B(?=(\d{3})+$)/g,',');
        },
        chooseAll: function () {
            this.all_checked = this.all_checked ? false : true;
            this.totalPrice = 0;
            if( this.all_checked ){
                for( var i = 0; i < this.list.length; i++ ){
                    var v = this.list[i];
                    for( var j = 0; j < v.length; j++ ){
                        var item = v[j];
                        this.totalPrice += item.price * item.count;
                        item.checked = true;
                    }
                }
            }else{
                for( var i = 0; i < this.list.length; i++ ){
                    var v = this.list[i];
                    for( var j = 0; j < v.length; j++ ){
                        var item = v[j];
                        item.checked = false;
                    }
                }
            }
            this.totalPrice_format = this.totalPrice.toFixed(2).toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    }
});

style.css
[v-cloak]{
    display:none;
}
table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells:show;
}
th,td{
    padding:8px 16px;
    border:1px solid #e9e9e9;
    text-align: left;
}
th{
    background: #f7f7f7;
    color:#5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

最后编辑于：2018.03.29 18:03:59

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343

Vue.js 2.0 完成购物车

简易版

遍历二维数组

推荐阅读更多精彩内容