vue 的购物车案例

<template>
    <div>
        <input type="checkbox" name="" v-model="isAll" id="" @change="click"   >全选
        <ul>
            <li v-for="(item,key) in list" :key="item.id" >
                <input type="checkbox" name="" v-model="checkList"  :value="item" @change="itemClick" >
                <img :src="item.img" alt="">
                <div>
                    <span>商品名：{{item.name}}</span>
                    <br>
                    <span>价格：{{item.price}}</span>
                </div>
                <div>
                    <button @click="item.number++" :disabled="item.number===item.limit" >+</button>{{item.number}} <button @click="item.number--"  :disabled="item.number === 0">-</button>
                </div>
                <div>
                    <button @click="del(key,item.id)"> 删除</button>
                </div>
            </li>
        </ul>
        总价格：{{sum()}}
        <br>
        {{checkList}}
    </div>
</template>
<script>
export default {
    data(){
        return{
            isAll:false,
            list:[
                {   
                    id:1,
                    name:'ddd1',
                    img:'https://img1.baidu.com/it/u=1583661127,1393133506&fm=26&fmt=auto',
                    number:0,
                    limit:5,
                    price:20
                },
                 {   
                    id:2,
                    name:'ddd2',
                    img:'https://img1.baidu.com/it/u=1583661127,1393133506&fm=26&fmt=auto',
                    number:0,
                    limit:5,
                    price:30
                },
                 {   
                    id:3,
                    name:'ddd3',
                    img:'https://img1.baidu.com/it/u=1583661127,1393133506&fm=26&fmt=auto',
                    number:0,
                    limit:5,
                    price:40
                }
            ],
            checkList:[]
        }
    },
    methods:{
       sum(){
        var total = 0
          this.checkList.forEach(item=>{
             total += item.number *   item.price
          })
          return total
       },
       del(key,id){
        this.list.splice(key,1)
        //删除原数组的同时过滤掉选中数组中的不存在的值
        this.checkList = this.checkList.filter(item=>item.id!==id)
       },
       click(){
           if(this.isAll ){
               this.checkList = this.list
           }else{
               this.checkList = []
           }
       },
       itemClick(){
           console.log(this.checkList.length)
           if(this.checkList.length === this.list.length){
               this.isAll = true
           }else{
               this.isAll = false
           }
       }
    }
}
</script>
<style>
ul{
    width: 500px;
}
li{
    display: flex;
    flex-flow: nowrap row;
    justify-content: space-around;
     margin:  10px;
}
img{
    width: 200px;
}
</style>
更多相关文章

随机推荐
