vue的v-for二维数组(购物车)

实现效果:
在这里插入图片描述
Html文件:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>购物车(vue的二维数组)</title>
    <link rel="stylesheet" href="购物车.css">
</head>
<body>
    <div id="app" v-cloak> 
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th><input type="checkbox" @click="handleAllChecked" :checked="checkall">全选</th>
                        <th>名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(title, index1) in list">
                        <tr>
                            <th>{{ title.title_name }}</th>
                        </tr>
                        <tr v-for="(item, index2) in title.content">
                        <td>{{ index2 +1 }}</td>
                        <td>
                            <input type="checkbox" @click="handleChecked(index1, index2)" :checked="item.check">
                        </td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button @click="handleReduce(index1, index2)" :disabled="item.count === 1">-</button>
                            <span>{{ item.count }}</span>
                            <button @click="handleAdd(index1, index2)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index1, index2)">移除</button>
                        </td>
                        </tr>
                    </template>
                </tbody>
            </table>
            <div>总价: ¥{{ totalPrice }}</div>
        </template>
        <div v-else>购物车是空的</div>
    </div>
</body>
    <script src="../../vue.js"></script>
    <script src="购物车.js"></script>
</html>

Css文件:

[v-cloak]{
    display: none;    
}
table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;          /* 合并表格边框 */
    border-spacing: 0px;                /* 相邻单元格的边框间的距离 */
    empty-cells: hide;                  /* 表格中空单元格上的边框和背景 */
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
    text-align: center;
}
th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;                /* 段落中的文本不进行换行 */
}
td>span{
    display: inline-block;
    text-align: center;
    width: 30px
}
td>button{
    margin: 0 3px;
}

js文件(vue):


var app = new Vue({
    el: '#app',
    data:{
        checkall: false,
        list:[
            {    
                title_name: '手机',
                content: [
                    {  id: 1,  name: '小米9',  price: 3099,  count: 9,  check: false,
                    },
                    {  id: 2,  name: '华为30',  price: 4888,  count: 1,  check: false,
                    },
                    {  id: 3,  name: 'Vivo20',  price: 3199,  count: 1,  check: false,
                    },
                ]
            },
            {
                title_name: '日常用品',
                content: [
                    {  id: 1,  name: '牙刷',  price: 88,  count: 1,  check: false,
                    },
                    {  id: 2,  name: '毛巾',  price: 58,  count: 1,  check: false,
                    },
                    {  id: 3,  name: '口杯',  price: 28,  count: 1,  check: false,
                    },
                ]
            },
            {
                title_name: '学习用品',
                content: [
                    {  id: 1,  name: '签字笔',  price: 18,  count: 1,  check: false,
                    },
                    {  id: 2,  name: '橡皮',  price: 8,  count: 1,  check: false,
                    },
                    {  id: 3,  name: '笔记本',  price: 2,  count: 1,  check: false,
                    },
                ]
            },
        ],
    },
    computed:{
        totalPrice: function(){
            var total = 0;
            for( var i = 0; i < this.list.length; i++){
                var item = this.list[i];
                for(var j = 0; j<item.content.length; j++){
                    var items = item.content[j];
                    if(items.check === true){
                        total += items.price * items.count;
                    }
                }
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');      //3位式显示金额
        },
    },
    methods:{
        handleReduce: function(index1, index2){
            if(this.list[index1].content[index2].count === 1) return;     //商品数量等于‘1’时,关闭按钮
            this.list[index1].content[index2].count--;                    //商品数量减一
        },
        handleAdd: function(index1, index2){
            this.list[index1].content[index2].count++;                    //商品数量加一
        },
        handleRemove: function(index1, index2){
            this.list[index1].content.splice(index2, 1);
        },
        handleChecked: function(index1, index2){
            this.list[index1].content[index2].check = !this.list[index1].content[index2].check   //切换选项选中状态
            if(this.list[index1].content[index2].check === false){                               //当有选项未选中时,取消全选情况
                this.checkall = false;
            }
        },
        handleAllChecked: function(){                           //全选 or 取消全选
            if(this.checkall === false){
                for(var i=0; i<this.list.length; i++){
                    for(var j=0; j<this.list[i].content.length; j++){
                        this.list[i].content[j].check = true;
                    }
                }
                this.checkall = true;
            }
            else if(this.checkall === true){
                for(var i=0; i<this.list.length; i++){
                    for(var j=0; j<this.list[i].content.length; j++){
                        this.list[i].content[j].check = false;
                    }
                }
                this.checkall = false;
            }
        },
    },
});
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值