vue 购物车

最新推荐文章于 2024-04-03 15:03:56 发布

原创最新推荐文章于 2024-04-03 15:03:56 发布 · 340 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5

vue-购物车

闲暇之余做的小demo。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" @change="handleChange" v-model="allCheckGroup">全选
        <ul>
            <li v-for="(item,index) in dataList" :key="item.id">
                <input type="checkbox" v-model="checkgroup" :value="item" @change="itemChange"> 
                {{ item }}
                <input type="button" value="del" @click="handleDel(item)">
                <input type="number" v-model="item.number">
                <input type="button" value="add" @click="handleAdd(item)">
            </li>
            {{ checkgroup }}
        </ul>
        <p>总价： {{ computedSum }}</p>
    </div>      

    <script>
       
        var vue = new Vue({
            el: "#app",
            data: {
                //全选
                allCheckGroup: false,
                //选中的
                checkgroup: [],
                dataList:[
                    {
                        name: '商品1',
                        price: 20,
                        id: 0,
                        number: 1
                    },
                    {
                        name: '商品2',
                        price: 10,
                        id: 1,
                        number: 1
                    },
                    {
                        name: '商品3',
                        price: 50,
                        id: 2,
                        number: 2
                    },
                ]
            },
           
            methods: {
                //全选
                handleChange(){
                    console.log('全选');
                    if(this.allCheckGroup){
                        this.checkgroup = this.dataList;
                    }else{
                        this.checkgroup = [];
                    }
                },
                //点击每一项    监听商品前每一个input  判断数组长度
                itemChange(){
                    console.log('itemChange');
                    // console.log("handleChange111")
                    if(this.checkgroup.length === this.dataList.length){
                        console.log(this.checkgroup.length);
                        console.log(this.dataList.length);
                        
                        this.allCheckGroup = true;
                    }else{
                        this.allCheckGroup = false;
                        console.log(this.allCheckGroup);
                        
                    }
                },
                //点击加
                handleAdd(item){
                    item.number++;
                },
                //点击减
                handleDel(item){
                    item.number--;
                    if(item.number === 0){
                        item.number = 1;
                    }
                }
            },

            computed: {
                //用计算属性计算总价
                computedSum(){
                    let sum = 0;
                    for(let i=0; i<this.checkgroup.length; i++){
                        sum += this.checkgroup[i].price*this.checkgroup[i].number;
                    }
                    return sum;
                }
            }
        })
    </script>
</body>
</html>