vue 简易购物车

最新推荐文章于 2022-11-22 13:35:24 发布

鹿鸣_呦呦

最新推荐文章于 2022-11-22 13:35:24 发布

阅读量178

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sinat_24918465/article/details/102937157

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

简易购物车，增加减少删除，算商品总价

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>简易购物车</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div id="app">
            <template v-if="list.length">
                <table width="500" border="1">
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in list">
                            <td>{{ item.name }}</td>
                            <td>{{ item.price }}</td>
                            <td>{{ item.count }}</td>
                            <td>
                                <a href="#" @click="addGoods(index)">增加</a>
                                <a href="#" @click="reduceGoods(index)" :disabled="item.count === 1">减少</a>
                                <a href="#" @click="removeGoods(index)">移除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div>商品总价：{{totalPrice}}</div>
            </template>
            <div v-else>购物车为空</div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    list: [
                        {
                            id:1,
                            name:"敷尔佳白膜",
                            price:68,
                            count:1
                        },
                        {
                            id:2,
                            name:"敷尔佳黑膜",
                            price:80,
                            count:1
                        },
                        {
                            id:3,
                            name:"敷尔佳虾青素",
                            price:64,
                            count:1
                        }
                    ]
                },
                computed:{
                    totalPrice: function(){
                        var total = 0;
                        for(var i=0; i<this.list.length; i++){
                            total += this.list[i].price * this.list[i].count;
                        }
                        return total;
                    }
                },
                methods:{
                    addGoods: function(index){
                        this.list[index].count++;
                    },
                    reduceGoods: function(index){
                        if(this.list[index].count == 1) return;
                        this.list[index].count--;
                    },
                    removeGoods: function(index){
                        this.list.splice(index,1);
                    }
                }
            })
        </script>
    </body>
</html>

鹿鸣_呦呦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 简易购物车

简易购物车，增加减少删除，算商品总价<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>简易购...
复制链接

扫一扫