Vue实现简易购物车

最新推荐文章于 2024-04-27 09:42:37 发布

大风起兮云飞扬丶

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量227

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45932565/article/details/104236941

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue版的购物车也是主要考察子父组件之间的通讯问题，也是vue中比较重要的一点。主要是通过给子组件绑定一个自定义事件，然后在子组件内部使用$emit触发这个事件，达到通讯的目的，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{
            list-style: none;
        }
        #app{
            height:auto;
            width:800px;
            margin: 50px auto;
        }
        li{
           padding:10px 0;
            display: flex;
            flex:1;
            justify-content:space-around;
        }
        button{
            height:30px;
            width:50px;
        }
    </style>
</head>
<body>
   <div id="app">
       <list :list="goodsList" @del="del"></list>
       
       <p>总价: {{total}} </p>
   </div>
</body>
<script>

    var many={
        props:["count","m"],
        methods: {
          handleChange(type){
              this.$emit("oncount",type,this.m)
          }
        },
        template:`
        <div>
        <button @click="handleChange('sub')">-</button>
        <span>{{count}}</span>
        <button @click="handleChange('add')">+</button>
        </div>
        `
    }

    var list={
        props:["list"],
        methods: {
            handlecount(type,m){
               if(type=="add"){
                  m.count+=1;
                  
               }else if(type=="sub" && m.count){ 
                    m.count-=1;
                   
               }
               m.sum=m.count*m.price//控制总价
            },
            handledel(m){
                this.$emit("del",m)
            }
        },


        template:`
        <ul>
            <li v-for="m in list" :key="m.id">
                <span>{{m.goodsName}}</span>
                <span>{{m.price}}</span>
                <many @oncount="handlecount" :count="m.count" :m="m"></many>
                <span>{{m.sum}}</span>
                <button @click="handledel(m)">删除</button>
            </li>
       </ul>
        `,
        components:{
            many 
        }
    }

    var app=new Vue({
        el:"#app",
        data:{
            goodsList:[{
                        id:"CD001",
                        goodsName:"iphoneX",
                        price:300,
                        count:1,
                        sum:300
                },{
                        id:"CD002",
                        goodsName:"vivo",
                        price:250,
                        count:3,
                        sum:750
                },{
                        id:"CD003",
                        goodsName:"xiaomi",
                        price:200,
                        count:1,
                        sum:200
                },{
                        id:"CD004",
                        goodsName:"oppo",
                        price:120,
                        count:4,
                        sum:480
                }],
        },

        methods: {
            del(m){
                this.goodsList = this.goodsList.filter((item)=>{
                           return m != item
                    })  
            }
        },
        computed:{
            total(){
                return  this.goodsList.reduce((total,item)=>{
                    return total += item.sum
                   },0) 
            }
        },
        components:{
            list
        }

    })

</script>
</html>