vue-购物车

Posted BluesQian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-购物车相关的知识,希望对你有一定的参考价值。

最终的实现效果:

需求分析:

购物车需要展示一个已加入购物车的商品列表,包含商品名称,商品单价,购买数量和操作等信息,还需要实时显示购买的总价。其中购买数量可以增加或减少,每类商品还可以从购物车中移除。

一:创建一个根元素来挂载Vue实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
   
</head>
<body>
<div id="app" v-cloak>
    
</div>

<script src="vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            
        }
    })
</script>
</body>
</html>

这里将vue.min.js写在<body>的底部,如果写在<head>里,Vue实例将无法创建,因为此时DOM还没有被解析完成。

二:

将界面渲染出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        [v-cloak]{
            display: none;
        }
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }
        th,td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: center;
        }
        th{
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: bold;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <table >
        <thead>
        <tr>
            <th></th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button>-</button>
                {{item.count}}
                <button>+</button>
            </td>
            <td>
                <button>移除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:"huawei",price:2199,count:1},
                {id:2,name:"MI",price:199,count:1},
                {id:3,name:"yijia",price:1199,count:1},
                {id:4,name:"meizu",price:1299,count:1}
            ]
        }
    })
</script>
</body>
</html>

这一步可以将表格渲染出来,接下来开始操作功能

三:

增加和减少商品数量

<td>
    <button @click="handleReduce(index)">-</button>
     {{item.count}}
    <button @click="handleAdd(index)">+</button>
</td>
            handleReduce:function (index) {
                this.list[index].count--;
            },
            handleAdd:function (index) {
                this.list[index].count++;
            }

当数量为0的时候,不再减少,可以按钮还需要这样:

<button @click="handleReduce(index)" :disabled="item.count === 0">-</button>

移除功能:

<button @click="handleRemove(index)">移除</button>

 

handleRemove:function (index) {
    this.list.splice(index,1)
}

四:

再做一个总价得功能

<div>{{totalPrice}}</div>
        computed:{
            totalPrice:function () {
                var sunm=0;
                for(var i=0;i<this.list.length;i++){
                    sunm+=this.list[i].count*this.list[i].price
                }
                return sunm
            }
        }

基本实现

 

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
<style>
    [v-cloak]{
        display: none;
    }
    table{
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
    }
    th,td{
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: center;
    }
    th{
        background: #f7f7f7;
        color: #5c6b77;
        font-weight: bold;
        white-space: nowrap;
    }
</style>
</head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button
                            @click="handleReduce(index)"
                            :disabled="item.count === 1">-</button>
                        {{item.count}}
                        <button @click="handleAdd(index)">+</button>
                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>总价:${{ totalPrice }}</div>
    </template>
    <div v-else>购物车为空</div>
</div>
<script src="vue.min.js"></script>
<script>
 var app = new Vue({
     el:"#app",
     data:{
        list:[
            {id:1,name:\'iphone\',price:6188,count:1},
            {id:2,name:\'iphone7\',price:6188,count:1},
            {id:3,name:\'iphone8\',price:6188,count:1},
            {id:4,name:\'iphone9\',price:6188,count:1}
        ]
     },
     computed:{
        totalPrice:function () {
            var total=0;
            for(var i=0;i<this.list.length;i++){
                var item = this.list[i];
                total+=item.price*item.count;
            }
            return total.toString().replace(/\\B(?=(\\d{3})+$)/g,\',\');
        }
     },
     methods:{
         handleReduce:function (index) {
             if(this.list[index].count === 1) return;
             this.list[index].count--;
         },
         handleAdd:function (index) {
             this.list[index].count++;
         },
         handleRemove:function (index) {
             this.list.splice(index,1);
         }
     }
 })
    
</script>
</body>
</html>

 

以上是关于vue-购物车的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板