购物车在vue中的案例

cartList.vue

<template>

    <div>

        <table class="table table-hover mygoodlist">

            <thead>

                <tr>

                <th>商品ID</th>

                <th>商品名称</th>

                <th>商品图片</th>

                <th>商品价格</th>

                <th>数量</th>

               

                <th>操作</th>

            </tr>

            </thead>

           <tbody>

            <tr v-for="(item,index) in good_list" :key="index">

                <td>{{item.id}}</td>

                <td>{{item.name}}</td>

                <td>

                    <img :src="item.img" alt="">

                </td>

                <td>{{item.price}}</td>

                <td>

                    <button class="btn btn-light" :disabled="item.flag" @click="reduce(item.id)">-</button>

                    <input type="text" @blur="changeNum(item.id,$event)" :value="item.num" class="form-control w100">

                    <button class="btn btn-light" @click="plus(item.id)">+</button>

                </td>

               

                <td>

                    <button type="button" class="btn btn-danger" @click="del(item.id)">删除</button>

                </td>

            </tr>

           </tbody>

        </table>

    </div>

</template>

<script>

export default {

    name: 'Test9Cartlist',

    props: ["good_list"],

    data() {

        return {

           

        };

    },

    mounted() {

       

    },

    methods: {

        del(id){

            this.$emit("cart-del",{id:id})

        },

        reduce(id){

            this.$emit("change-num",{id:id,type:"reduce"})

        },

        plus(id){

            this.$emit("change-num",{id:id,type:"plus"})

        },

        changeNum(id,event){

            console.log(event)

            console.log(event.target.value)

            this.$emit("change-num",{id:id,type:"changeNum",num:event.target.value})

        }

    },

};

</script>

<style lang="scss" scoped>

.mygoodlist img{

    width: 100px;

}

.w100{

    width: 100px;

    display: inline-block;

}

</style>

mycart.vue

<template>

    <div class="container">

        <h1>我是mycart.vue购物车组件</h1>

        <cart-title></cart-title>

        <cart-list @cart-del="del"  @change-num="changeNum" :good_list="good_list"></cart-list>

        <cart-total></cart-total>

    </div>

</template>

<script>

import cartTotal from "./cartTotal.vue"

import cartList from "./cartList.vue"

import cartTitle from "./cartTitle.vue"

export default {

    name: 'Test9Mycart',

    data() {

        return {

            title:"我的商品",

            good_list:[

                {

                    id:1,

                    name:"iPad",

                    price:1999,

                    num:18,

                    flag:false,

                    img:require("../assets/img/1.jpg")

                },

{

                    id:2,

                    name:"苹果手机",

                    price:2999,

                    num:11,

                    flag:false,

                    img:require("../assets/img/2.jpg")

                },

                {

                    id:3,

                    name:"智能手机",

                    price:999,

                    num:15,

                    flag:false,

                    img:require("../assets/img/3.jpg")

                },

                {

                    id:4,

                    name:"电视",

                    price:4999,

                    num:17,

                    flag:false,

                    img:require("../assets/img/4.jpg")

                },

                {

                    id:5,

                    name:"笔记本",

                    price:6999,

                    num:15,

                    flag:false,

                    img:require("../assets/img/5.jpg")

                },

            ]

        };

    },

    mounted() {

       

    },

    methods: {

        del(val){

            console.log(val.id)

            var index = this.good_list.findIndex((item)=>{

                return item.id==val.id

            })

            console.log(index)

            this.good_list.splice(index,1)

        },

        changeNum(val){

            console.log(val)

            var index=this.good_list.findIndex((item)=>{

                return item.id==val.id

            })

            // console.log(val.type=="reduce")

            if(val.type=="reduce"){

                this.good_list[index].num--

                // if(this.good_list[index].num==0){

                //     this.good_list.splice(index,1)

                // }

                if(this.good_list[index].num==0){

                    this.good_list[index].num==1

                    this.good_list[index].flag=true

                }

            }

            if(val.type=="plus"){

                this.good_list[index].num++

            }

            if(val.type=="changeNum"){

                this.good_list[index].num=val.num

            }

        }

    },

    components:{

        cartTotal,

        cartList,

        cartTitle

    }

};

</script>

<style lang="scss" scoped>

</style>