前端学习-超强VUE教程09-购物车_前端购物车教程-优快云博客

练习案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="checkbox" @change="handleisAllcheck" v-model="checkallbox" >
        <ul>
            <li v-for="data in datalist">
                <input type="checkbox" v-model="checkgroup" :value="data" @change="handleischeck">
                {{data}}
                <button @click="handleDelclick(data)">del</button>
                {{data.number}}
                <button @click="data.number++">add</button>
            </li>
        </ul>
        {{checkgroup}}
       <p>总计算金额：{{getsum()}}</p>
    </div>

    <script type="text/javascript">
      var app = new Vue({
            el: '#box',
            data: {
                checkallbox: false,
                checkgroup: [],
                datalist: [
                    {
                        name: '商品1',
                        price: 10,
                        number: 2,
                        id: 1
                    },
                    {
                        name: '商品1',
                        price: 20,
                        number: 5,
                        id: 2
                    },{
                        name: '商品1',
                        price: 30,
                        number: 6,
                        id: 3
                    }
                ]
            },
            methods: {
                getsum(){
                    var sum=0;
                    for(i in this.checkgroup){
                        sum+= this.checkgroup[i].number*this.checkgroup[i].price;
                    }
                    return sum;
                },
                handleisAllcheck(){
                    console.log("改变了"+this.checkallbox);
                    if(this.checkallbox){
                        this.checkgroup=this.datalist;
                        this.checkallbox=false;
                    }else{
                        this.checkgroup=[];
                    
                    }
                },
                handleischeck(){
                    //判斷是否全部勾選
                    if(this.checkgroup.length === this.datalist.length){
                        this.checkallbox=true;
                    }else{
                        this.checkallbox=false;
                    }
                },
                handleDelclick(data){
                    var number=data.number--;
                    if(number===0){
                        data.number=1;   
                    }
                }
            }
        })
    </script>
</body>

</html>