vue零基础之四购物车实战

最新推荐文章于 2023-02-06 09:49:45 发布

uncle_Huang

最新推荐文章于 2023-02-06 09:49:45 发布

阅读量153

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/uncle_Huang/article/details/101068930

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述

组件化之前

（没加选中的课程和计算需付金额的功能）

<body>
    <div id="app">
        <div>
            课程：<input type="text" name="" v-model='course'>
            价格：<input type="text" name="" v-model='price'>
            <button @click='addcourse'>添加商品</button>
        </div>
        <ul>
            <li v-for='(list,index) in classlist'>
                课程名称：{{list.text}}---价格：{{list.price}}
                <button @click='addtocart(index)'>添加到购物车</button>
            </li>
        </ul>
        <div>
            购物车
            <table border="1">
                <tr>
                    <th>选中</th>
                    <th>课程</th>
                    <th>数量</th>
                    <th>价格</th>
                </tr>
                <tr v-for="(cart,index) in cartarr">
                    <td>
                        <input type="checkbox" name="" v-model='cart.active'>
                    </td>
                    <td>{{cart.text}}</td>
                    <td>
                        <span @click='deduceCount(index)'>-</span>
                        {{cart.count}}
                        <span @click='addCount(index)'>+</span>
                    </td>
                    <td>{{cart.count*cart.price}}</td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script type="text/javascript">
        
        new Vue({
            el:'#app',
            template:``,
            data(){
                return{
                    classlist:[
                    {text:'springcloud',price:20},
                    {text:'vue',price:30},
                    {text:'js',price:40},
                    {text:'php',price:50},

                     ],
                    course:'',
                    price:'',
                    cartarr:[]
                }
                
            },
            methods:{
                addcourse(){
                    //插入数据到我们的商品库
                    this.classlist.push({text:this.course,price:this.price})
                    //清空我们刚输入的商品信息
                    this.course='',
                    this.price=''
                },
                addtocart(index){
                    const goods=this.classlist[index]
                    const result=this.cartarr.find(v=>v.text==goods.text)
                    if(result){
                        result.count+=1
                    }else{
                        this.cartarr.push({...goods,count:1,active:true})
                    }
                },
                //减少购物车商品数量
                deduceCount(index){
                   if(this.cartarr[index].count>1){
                    this.cartarr[index].count--
                   }else{
                       if(window.confirm('是否删除${this.cartarr[index].text}?')){
                           this.cartarr.splice(index,1)
                       }
                   }
                },
                //增加购物车商品数量
                addCount(index){
                   this.cartarr[index].count++
                }
            }
        })
    </script>
</body>

组件化之后

<body>
    <div id="app">
        <div>
            课程：<input type="text" name="" v-model='course'>
            价格：<input type="text" name="" v-model='price'>
            <button @click='addcourse'>添加商品</button>
        </div>
        <ul>
            <li v-for='(list,index) in classlist'>
                课程名称：{{list.text}}---价格：{{list.price}}
                <button @click='addtocart(index)'>添加到购物车</button>
            </li>
        </ul>
        <cart :cartarr='cartarr'></cart>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script type="text/javascript">
        var Cart={
            props:[
                'cartarr'
            ],
            template:`
            <div>
                购物车
                <table border="1">
                    <tr>
                        <th>选中</th>
                        <th>课程</th>
                        <th>数量</th>
                        <th>价格</th>
                    </tr>
                    <tr v-for="(cart,index) in cartarr">
                        <td>
                            <input type="checkbox" name="" v-model='cart.active'>
                        </td>
                        <td>{{cart.text}}</td>
                        <td>
                            <span @click='deduceCount(index)'>-</span>
                            {{cart.count}}
                            <span @click='addCount(index)'>+</span>
                        </td>
                        <td>{{cart.count*cart.price}}</td>
                    </tr>
                    <tr>
                        <td colspan='2'>选中的课程：{{activeCount}}/{{count}}</td>
                        <td colspan='2'>需付金额：{{totalprice}}</td>
                    </tr>
                </table>
            </div>`,
            computed:{
                activeCount(){
                    return this.cartarr.filter(v=>v.active).length
                    
                },
                count(){
                    return this.cartarr.length
                },
                totalprice(){
                    let total=0
                    this.cartarr.forEach(v=>{
                        if(v.active){
                            total+=v.price*v.count  
                      }
                    })
                    return total
                }
            },
            watch:{
                cartarr:{
                    handler(){
                        //数据持久化存
                        window.localStorage.setItem('cart',JSON.stringify(this.cartarr))
                    },
                    deep:true
                }
            },
            methods:{
                //减少购物车商品数量
                deduceCount(index){
                   if(this.cartarr[index].count>1){
                    this.cartarr[index].count--
                   }else{
                       if(window.confirm('是否删除${this.cartarr[index].text}?')){
                           this.cartarr.splice(index,1)
                       }
                   }
                },
                //增加购物车商品数量
                addCount(index){
                   this.cartarr[index].count++
                }
            }
        }
        new Vue({
            el:'#app',
            template:``,
            components:{
                Cart
            },
            data(){
                return{
                    classlist:[
                    {text:'springcloud',price:20},
                    {text:'vue',price:30},
                    {text:'js',price:40},
                    {text:'php',price:50},

                     ],
                    course:'',
                    price:'',
                    cartarr:[]
                }
                
            },
            methods:{
                addcourse(){
                    //插入数据到我们的商品库
                    this.classlist.push({text:this.course,price:this.price})
                    //清空我们刚输入的商品信息
                    this.course='',
                    this.price=''
                },
                addtocart(index){
                    const goods=this.classlist[index]
                    const result=this.cartarr.find(v=>v.text==goods.text)
                    if(result){
                        result.count+=1
                    }else{
                        this.cartarr.push({...goods,count:1,active:true})
                    }
                },
                
            },
            created(){
                //数据持久化取
                this.cartarr=JSON.parse(window.localStorage.getItem('cart'))
            }
        })
    </script>
</body>