vue 购物车

最新推荐文章于 2025-06-18 08:59:31 发布

原创最新推荐文章于 2025-06-18 08:59:31 发布 · 397 阅读

1 ·

CC 4.0 BY-SA版权

vuejs 专栏收录该内容

39 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
    <template v-if="list.length">
        <table>
            <thead>
                    <tr>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>操作</th>
                    <th>
                        全选
                        <input checked="allSelect" type="checkbox" v-model="allSelect" @click="allselectaction">
                    </th>
                    </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="handleAdd(index)">+</button>
                        {{item.count}}
                        <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
                    </td>
                    <td>
                        <button @click="handleDelete(index)">删除</button>
                    </td>
                    <td>
                        <input type="checkbox" checked="item.isSelect" v-model="item.isSelect">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>总价:$ {{ totalPrice }} </div>
    </template>

    <div v-else>购物车为空!</div>
</div>
<!--自动识别最稳定的vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>

2. index.js

/**
 * Created by kauriHealth on 2017/10/24.
 */

var vm = new Vue({

    el:'#app',

    data:{
        allSelect:false,
        list:[
            {
                id:1,
                name:'iPhone7',
                price:'4448',
                count:1,
                isSelect:false
            },
            {
                id:2,
                name:'iPhone8',
                price:'5888',
                count:3,
                isSelect:true
            },
            {
                id:1,
                name:'iPhone8Plus',
                price:'6123',
                count:2,
                isSelect:false
            },
            {
                id:1,
                name:'iPhoneX',
                price:'8388',
                count:2,
                isSelect:false
            }
        ]

    },

    computed:{
        totalPrice: function () {
            var total = 0;
            for (var i=0;i<this.list.length;i++){
                var item = this.list[i];
                if (item.isSelect){
                    total += item.price * item.count
                }
            }

            total= total.toString().replace(/\B(?=(\d{3})+$)/g,',');

            return total;
        }
    },

    methods:{
        handleDelete:function (index) {
            if (this.list[index].count === 1) return;
            this.list.splice(index,1);
        },
        handleAdd:function (index) {
            this.list[index].count++;
        },
        handleReduce:function (index) {
            this.list[index].count--;
        },
        allselectaction:function () {

            // alert(this.allSelect)
            this.allSelect=!this.allSelect
            if(this.allSelect){
                for (var i=0; i<this.list.length; i++){
                    var item = this.list[i];
                    item.isSelect = true
                }
            }else {
                for (var i=0; i<this.list.length; i++){
                    var item = this.list[i];
                    item.isSelect = false
                }
            }
        }
    },
    watch:{

        list:{
            handler:function (val,oldval) {
                if(val){

                    var index = 0;
                    for (var i=0; i<this.list.length; i++){
                        var item = this.list[i];
                        if(item.isSelect){
                            index++
                        }
                    }
                    if(index == this.list.length){
                        this.allSelect = true
                    }else {
                        this.allSelect = false
                    }
                }
            },
            deep:true
        },

        // allSelect:{
        //     handler:function (val,oldval) {
        //         if(val){
        //             for (var i=0; i<this.list.length; i++){
        //                 var item = this.list[i];
        //                 item.isSelect = true
        //             }
        //         }else {
        //             for (var i=0; i<this.list.length; i++){
        //                 var item = this.list[i];
        //                 item.isSelect = false
        //             }
        //         }
        //     }
        // }

    }

})

// vm.$watch('allSelect',function (val,oldval) {
//     if(val){
//         for (var i=0; i<this.list.length; i++){
//             var item = this.list[i];
//             item.isSelect = true
//         }
//     }else {
//         for (var i=0; i<this.list.length; i++){
//             var item = this.list[i];
//             item.isSelect = false
//         }
//     }
// })
//
// vm.$watch('list',function (val,oldval) {
//     if(val){
//
//         var index = 0;
//         for (var i=0; i<this.list.length; i++){
//             var item = this.list[i];
//             if(item.isSelect){
//                 index++
//             }
//         }
//
//         alert(index)
//         if(index == this.list.length){
//             this.allSelect = true
//         }
//
//     }else {
//         this.allSelect = false
//     }
// },true)

3. index.css

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;
}