购物车商品的添加、删除和计算总金额功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Examples</title>
    </head>
<body>
    <div id="box">
        <!--全选功能-->
        <input type="checkbox" @change="handleChange" v-model="isAllChecked"/>
        <!--
            绑定事件，不选用click，使用change每次check值改变会触发
            双向绑定布尔值
        -->

        <ul>
            <li v-for="data in datalist">
                <input type="checkbox" v-model="checkgroup" :value="data" @change="handleLiChange"/>
                <!--
                    v-model绑定数组，且要有value值
                    value使用数组绑定
                    :value="data.number||data.price||data.id||data.number*data.price"
                -->
                {{data}}
                <!--设置添加删除按钮-->
                <button @click="handleDelClick(data)">del</button>
                <!--
                    用户体验
                    限制不小于0
                    所以不能使用data.number--
                -->
                {{data.number}}<!--当前数量-->
                <button @click="data.number++">add</button>
                <!--
                    data.number++自增1
                    点击事件，简单逻辑可直接使用代码
                -->
            </li>
        </ul>

        {{checkgroup}}
        <p>总金额计算:{{ getSum() }}</p> <!--函数表达式，函数要有返回值-->
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#box",
            data:{
            checkgroup:[],
            isAllChecked:false,
            datalist:[
                {
                    name:"商品1",
                    price:10,
                    number:1,
                    id:"1",
                },
                    {
                    name:"商品2",
                    price:20,
                    number:2,
                    id:"2",
                    },
                    {
                    name:"商品3",
                    price:30,
                    number:3,
                    id:"3",
                    }
                ]
            },
            methods:{
            getSum(){
                // 函数计算中的状态改变后， 函数会自动执行一遍
                var sum = 0;
                for(var i in this.checkgroup){
                sum+= this.checkgroup[i].number*this.checkgroup[i].price;
                }
                return sum;
            },

            handleChange(){  //全选判断
                console.log("改变了",this.isAllChecked);
                if(this.isAllChecked){
                this.checkgroup = this.datalist;  //全选的话为原数组
                }else{
                this.checkgroup = [];  //为假即全不选，即赋值空数组
                }
            },

            handleLiChange(){ //判断是不是都勾选
                console.log("handleLiChange-判断是不是都勾选")
                if(this.checkgroup.length === this.datalist.length){  //判断勾选数组与原始数组是否全等
                this.isAllChecked = true;
                }else{
                this.isAllChecked = false;
                }
            },

            handleDelClick(data){  //数量减少函数
                // console.log(data)
                data.number--;
                if(data.number === 0){
                data.number = 1; //减到0的情况下永远赋值为1
                }
            }
            }
        })
    </script>
</body>
</html>
@Tiramisu
发布了20 篇原创文章 · 获赞 0 · 访问量 99
私信关注
购物车商品的添加、删除和计算总金额功能

猜你喜欢
