二、Vue实现购物车功能

最新推荐文章于 2024-07-16 16:33:57 发布

C.&H.

最新推荐文章于 2024-07-16 16:33:57 发布

阅读量304

点赞数

分类专栏：框架Vue 文章标签： vue

本文链接：https://blog.csdn.net/sunnnnh/article/details/114667756

版权

框架Vue 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

根据表单的双向绑定，实现购物车的基本功能：

计算总价

商品增加

商品删除

全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
       
    </style>
</head>
<body>
    <div id="app">
        <!--1. 全选按钮：当选择该按钮时，选中全部商品，否则全不选
            可通过布尔变量checkAll来控制

            @change="allChange": 当该按钮变化时，触发事件allChange

            注意：当有商品取消选中时，则取消全选
        -->
        全选：<input type="checkbox" @change="allChange" v-model="checkAll" />

        <!--2. 商品列表
            注意：当某个商品没有选中时，则全选按钮为未选中状态
            因此为每个选项添加事件 @change="liChange"
        -->
        <ul>
            <li v-for="data in datalist">
                <input type="checkbox" @change="liChange" v-model="group" :value="data"/>
                {{data}}

                <!--3. 为每个商品添加：减小 当前数目 增加
                    增加：可直接通过data.number++实现
                    减小：由于可能出现负值，需要调用方法subClick实现
                -->
                <button @click="subClick(data)">sub</button>
                {{data.number}}
                <button @click="data.number++">add</button>
            </li>
        </ul>
       {{group}}

       <p>商品总金额：{{getSum()}}</p>
    </div>
    
   

    <script>
        var v = new Vue({
            el: "#app",
            data:{
                checkAll:false,
                group:[],
               datalist:[
                   {
                       name:"商品1",
                       price:10,
                       number:1,
                       id:"1",
                   },
                   {
                       name:"商品2",
                       price:20,
                       number:2,
                       id:"3",
                   },
                   {
                       name:"商品3",
                       price:30,
                       number:3,
                       id:"3",
                   }
               ]
            },
            methods:{
                /*
                1.获取选中商品的总金额
                  遍历选中的商品数组group，计算总金额，并返回
                */
                getSum(){
                    var sum=0;
                    for(var i in this.group){
                        sum+=this.group[i].price*this.group[i].number
                    }
                    return sum
                },
                /*
                2.当全选按钮发生变化时
                */
                allChange(){
                    if(this.checkAll){//全选，则选中所有商品
                        this.group=this.datalist 
                    }else{//全不选
                        this.group=[]
                    }
                },

                /*
                 3. 当商品的复选按钮发生变化时

                 需调整全选按钮：
                 商品全部选中时，checkAll=true
                 否则，checkAll=false
                 只需判断选中商品数组的长度和所有商品数组的长度是否相等
                */
                liChange(){
                    if(this.group.length===this.datalist.length){//全选按钮为选中状态
                        this.checkAll=true
                    }else{//全选按钮为未选中状态
                        this.checkAll=false
                    }
                },

                /*
                4.对商品数量进行减操作
                  商品数量不能为负值
                */
                subClick(data){
                    data.number--;
                    if(data.number<0){
                        data.number=0;
                    }
                }
            }
               
        })
    </script>
</body>
</html>

C.&H.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
二、Vue实现购物车功能

根据表单的双向绑定，实现购物车的基本功能：计算总价商品增加商品删除全选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g.
复制链接

扫一扫

专栏目录