如何用vue.js写购物车功能

最新推荐文章于 2023-07-04 23:47:38 发布

The_Best_Hacker

最新推荐文章于 2023-07-04 23:47:38 发布

阅读量604

点赞数

分类专栏： javaWeb阶段文章标签： Java vue

javaWeb阶段专栏收录该内容

55 篇文章 18 订阅

订阅专栏

原文来自：https://blog.csdn.net/zwq123w/article/details/78618010

//要引入vue.js同时还有axios.min.js
    <script src="./homework/node_modules/vue/dist/vue.min.js"></script>
    <script src="./homework/node_modules/axios/dist/axios.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    table{
         border-collapse:collapse; 
         float: left;
         border:1px solid #999;
    }
    #btn{
        background:#999;
        color: #fff;
    }
    #shop{
        list-style: none;   
    }
    #shop li{
        width: 400px;
        height:150px;
        border:1px solid #999;
    }
        #shop .p{
            width:200px;
            height:30px;
            background:gray;
            color: #fff;
            text-align: center;
            line-height:30px;
        }
        #shop .p1{
            color:orange;
            float: left;
        }
        #shop .p2{
            color: #999;
            float: left;
            margin-left:10px;
        }
        #shop .p3{
        clear: both;
        }

    </style>
    <script src="./homework/node_modules/vue/dist/vue.min.js"></script>
    <script src="./homework/node_modules/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">

    <ul id="shop">
        <li v-for="item,index in plist" :key="item.id" id="li">
            <p class="p">{{item.title}}</p>
            <p class="p1">&yen;{{item.sprice}}</p>
            <p class="p2"><del>&yen;{{item.price}}</del></p>
            <p class="p3">
            <span v-if="nums[item.id]">
                <button @click="sub(item)">-</button>
                {{nums[item.id]}}
            </span>
                <button @click="add(item)">+</button>
            </p>
        </li>   
    </ul>
    <template v-if="car.length">
        <table border="1px">
            <tr v-for="item,index in car">
                <td>{{item.title}}</td>
                <td>
                    &yen;{{item.sprice}}
                    <del>&yen;{{item.price}}</del>
                </td>
                <td>
                <button @click="carsub(index,item.id)">-</button>
                    {{nums[item.id]}}
                    <button @click="caradd(index,item.id,item.store)">+</button>
                </td>
            </tr>
        </table>
        <button @click="empty" id="btn">清空购物车</button>
        总计:<b>&yen;{{itotal}}</b>
    </template>
</div>
<script>
//npm install axios安装axios
var baseurl="http://www.easy-mock.com/mock/5a167443d8031f24f9a7a5f9/daojia";

//创建Vue实例
var vm = new Vue({
    el:"#app",

    data:{
        plist:[],//存放列表数据
        car:[],
        nums:{},
        buyed:[]
    },
    computed:{
        itotal:function(){
            var total=0;
            for(var i=0;i<this.car.length;i++){
                total+=this.car[i].sprice*this.nums[this.car[i].id];
            }
            return total;
        }
    },
    methods:{
        //在购物车中增加数量
        caradd:function(index,id,store){
            //判断数量是否超过库存
            if(this.nums[id]>store){
                return;
            }
            //this.car[index].num+=1;//数量加1
            this.nums[id]+=1;
            this.$set(this.car,index,this.car[index]);
        },
        //在购物车中减少数量
        carsub:function(index,id){
            //数量少于1时,删除商品
            if(this.nums[id]<=1){
                this.car.splice(index,1);
                this.buyed.splice(index,1);
                delete this.nums[id];
                return;
            }
            //this.car[index].num-=1;//商品-1
            this.nums[id]-=1;
            this.$set(this.car,index,this.car[index]);
        },
        add:function(item){
            if(this.buyed.indexOf(item.id)>=0){//判断商品是否已经添加了
                for(var i=0;i<this.car.length;i++){
                    if(this.car[i].id==item.id){
                        if(this.nums[item.id]>item.store){
                            return ;
                        }
                        //this.car[i].num+=1;
                        this.nums[item.id]+=1;
                        this.$set(this.car, i, this.car[i]);
                        return;
                    }
                }
                return;//结束当前函数别的运行
            }
            //item.num = 1;
            this.$set(this.nums,item.id,1);
            this.buyed.push(item.id);
            this.car.push(item);
        },
        sub:function(item){
            for(var i=0;i<this.car.length;i++){
                if(this.car[i].id==item.id){
                    if(this.nums[item.id]==1){
                        this.car.splice(i,1);
                        this.buyed.splice(i,1);
                        delete this.nums[item.id];
                        return;
                    }
                    this.car[i].num-=1;
                    this.nums[item.id]-=1;
                    this.$set(this.car,i,this.car[i]);
                    return;
                }
            }
        },
        empty:function(){
            this.car=[];
            this.buyed=[];
            this.nums={};
        }
    },
    created:function(){
        var th = this;
        //当vue实例化完成使用axios异步请求数据
        axios.get(baseurl+'/plists').then(function(res){
            th.plist=th.plist.concat(res.data.plists);
            //console.log(res.data)
        }).catch(function(err){
            console.log(err)
        });
    }
})

//创建mock数据
    var data = {
            "list|10-20":
        [
            {
                "id":"@guid",
                "title":"@ctitle",
                "price|1-100.2":0,
                "sprice":function(){
                    return this.price-3;
                },
                "store|2-20":1
            }
        ]
    }
</script>

</body>
</html>

The_Best_Hacker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用vue.js写购物车功能

原文来自：https://blog.csdn.net/zwq123w/article/details/78618010 //要引入vue.js同时还有axios.min.js &lt;script src="./homework/node_modules/vue/dist/vue.min.js"&gt;&lt;/script&gt; &lt;script src="./hom...
复制链接

扫一扫