Vue购物车的基本功实现

用Vue来实现一个购物车的–购买数量的加减,勾选,小计,总计,删(单列,批量)的基本功能

页面结构,通常我们会先将整体分为3个部分,头部(header),内容区整体(tbody),尾部(footer),的结构来构造页面,如下

<div class="box">
        <div class="header">
            <div class="item-title">
                <input type="checkbox" @click="checkall" :checked="checkedflag"> 全选
            </div>
            <div class="item-title">
                名称
            </div>
            <div class="item-title">
                价格
            </div>
            <div class="item-title">
                数量
            </div>
            <div class="item-title">
                小计
            </div>
            <div class="item-title">
                操作
            </div>
        </div>
        <div class="tbody">
            <div class="item-tr" v-for="item in list" :key="item.id">
                <div class="item-shopcar">
                    <input type="checkbox" v-model="item.ischecked">
                </div>
                <div class="item-shopcar">
                    {{item.name}}
                </div>
                <div class="item-shopcar">
                    {{item.price.toFixed(2)}}
                </div>
                <div class="item-shopcar">
                    <!-- v-if="item.num<1?item.num=1:item.num" -->
                    <button @click="reduce(item.id)" v-show="item.num>1">-</button>
                    <input :value="item.num">
                    <button @click="add(item.id)">+</button>
                </div>
                <div class="item-shopcar">
                    {{(item.price * item.num).toFixed(2)}}
                </div>
                <div class="item-shopcar" @click="del(item.id)">
                    删除
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="item-account">
                <button @click="delall">批量删除</button>
            </div>
            <div class="item-account"></div>
            <div class="item-account"></div>
            <div class="item-account"></div>
            <div class="item-account">
                总数{{subtotal}}
            </div>
            <div class="item-account">
                结算{{total}}
            </div>
        </div>
    </div>

Vue代码对页面渲染的事件等驱动部分

<script>

    var vue = new Vue({
        el: ".box",

        data: {
            checkedflag: true,
            //数据来源
            list: [{ id: 1, name: "商品一", price: 200, num: 1, ischecked: true }, 
            { id: 2, name: "商品二", price: 400, num: 1, ischecked: true },
             { id: 3, name: "商品三", price: 600, num: 1, ischecked: true }, 
             { id: 4, name: "商品四", price: 800, num: 2, ischecked: true }]
        },
        methods: {
            //批量删除
            delall() {
                for (var i = 0; i < this.list.length; i++) {
                    var indexitem = this.list[i];
                    if (indexitem.ischecked) {
                        var index = this.list.indexOf(indexitem);
                        this.list.splice(index, 1);
                        i--;
                    }
                }
            },
            //全选
            checkall(e) {
                this.list.filter(item => {
                    item.ischecked = e.target.checked;
                })
            },
            // 加数量
            add(id) {
                this.list.forEach((item, index) => {
                    if (index + 1 == id) {
                        item.num++;
                    }
                });
            },
            // 减数量
            reduce(id) {
                this.list.forEach((item, index) => {
                    if (index + 1 == id) {
                        item.num--;
                    }
                });
            },
            // 删除
            del(id) {
                if (confirm("您确定是否删除?")) {
                    this.list = this.list.filter(item => item.id != id)
                }

            },
        },
        // 监听用来监听data的数据,只要数据做出了改变,那么监听的事件就会触发
        watch: {
            //全选的监听
            // checkedflag(flag) {
            //     for (var i = 0; i < this.list.length; i++) {
            //         this.list[i].ischecked = flag;
            //     }
            // },
            //单选的监听
            list: {
                deep: true,
                handler(list) {
                    this.checkedflag = list.every(item => item.ischecked)
                    if (list.length == 0) {
                        this.checkedflag = false;
                    }
                }
            }
        },
        //补充data的值,将值直接渲染到页面,用于计算
        computed: {
            //小计
            subtotal() {
                let sum = 0;
                this.list.forEach(item => {
                    if (item.ischecked) {
                        sum += item.num;
                    }
                })
                return sum;
            },
            //总计
            total() {
                let totalall = 0;
                this.list.forEach(item => {
                    if (item.ischecked) {
                        totalall += item.num * item.price;
                    }
                })
                return totalall;
            }
        }
    });
</script>

可直接粘贴代码进行拷贝运行,以上代码,还有很多的优化,以及功能的增强,欢迎各位前来指正