vue 简单应用购物车

<!DOCTYPE html>
<html>
<head>
    <title>list</title>
</head>
<body>
    <div id="carList">
        <div class="shoplist">
            <div class="shopitem" v-for="(item,index) in shopList" v-key="index">
                <input type="checkbox" name="vehicle" :checked="item.checked" @click="selected_one(item)"/>
                <span>商品名字: {{item.name}};</span>
                <span>价格：{{item.price | moneyFormat(item.price)}}</span>
                <div>
                    <input type="button" name="" value="-" @click="singerShopPrice(item,false)">
                    <span v-model="item.num" >{{item.num}}</span>
                    <input type="button" name="" value="+" @click="singerShopPrice(item,true)"> 
                    总价：<span> {{item.price * item.num | moneyFormat(item.price * item.num)}} </span>
                </div>
                <div @click="delectShop(item)">删除</div>
            </div>
        </div>
        <div class="car">
            <input type="checkbox" name="vehicle" value="Car" :checked ='selectedall' @click="selected_all(selectedall)"/>  
            <span>all总价：  {{totalprice | moneyFormat(totalprice)}}</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> -->
    <script>
        var vue = new Vue({
            el:'#carList',
            data:{
                shopList:[
                    {
                        'name':'麻花',
                        'price':12,
                        'num':1
                    },
                    {
                        'name':'包子',
                        'price':10,
                        'num':1
                    },
                    {
                        'name':'饺子',
                        'price':18,
                        'num':1
                    }
                ],
                selectedall:false,
                totalprice:0,
                //当前要删除的商品
                currentDelShop:{}

            },
            mounted:function(){
            },
            filters:{
                //格式化金钱
                moneyFormat(money){
                    return '￥' + money.toFixed(2) + '元'
                }
            },
            methods:{
                //单个商品的加减
                singerShopPrice(shop,flag){
                    if(flag){
                        // + 
                        shop.num++
                    }else{
                        // -
                        if(shop.num <= 1){
                            shop.num = 1
                            return
                        }
                        shop.num--
                    }
                    this.getAllShopPrice()
                },
                //全选
                selected_all(flag){
                    //总控制
                    this.selectedall = !flag
                    this.shopList.forEach((value,index)=>{
                        
                        if(typeof value.checked === 'undefined'){
                            this.$set(value,'checked',!flag)
                        }else{
                            value.checked = !flag
                        }
                    })
                    this.getAllShopPrice()
                },

                //总价求和
                getAllShopPrice(){
                    let totalPrice = 0;

                    this.shopList.forEach((val,index)=>{
                        if(val.checked){
                            totalPrice += val.price * val.num
                        }
                    })
                    this.totalprice = totalPrice
                },

                //单品选中取消
                selected_one(shop){
                    if(typeof shop.checked === 'undefined'){
                        this.$set(shop,'checked',true)
                    }else{
                        shop.checked = !shop.checked
                    }
                    console.log(this.shopList)
                    this.getAllShopPrice()
                    this.hasSelectedAll()
                },
                //判断是否全选
                hasSelectedAll(){
                    let flag = true
                    this.shopList.forEach((val,index)=>{
                        if(!val.checked){
                            flag = false
                        }
                    })
                    this.selectedall = flag
                },
                delectShop(shop){
                    const index = this.shopList.indexOf(shop)
                    this.currentDelShop = shop
                    this.shopList.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。