vue 购物车

最新推荐文章于 2023-05-26 14:36:40 发布

周家大小姐.

最新推荐文章于 2023-05-26 14:36:40 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.0 周家大小姐

本文链接：https://blog.csdn.net/qq_40190624/article/details/82184151

vue2.0 同时被 2 个专栏收录

273 篇文章

订阅专栏

周家大小姐

254 篇文章

订阅专栏

此博客围绕Vue购物车展开，虽内容未给出，但可推测涉及利用Vue技术构建购物车的相关内容，如商品展示、添加删除、数量修改等功能的实现，属于前端开发领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="home" v-cloak>
        <div 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" :key="index">
                        <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>
        </div>
        <div v-else>购物车为空</div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: "iphone 7",
                    price: 6188,
                    count: 1
                },
                {
                    id: 2,
                    name: "iphone 8",
                    price: 9800,
                    count: 1
                },
                {
                    id: 3,
                    name: "iphone 9",
                    price: 10021,
                    count: 1
                }
            ],
            message: "",
            picked: true,
            pick:'js',
           
         
        
        };
    },
    computed: {
        // 总价
        totalPrice: function() {
            var total = 0;
            for (let i = 0; i < this.list.length; i++) {
                // 把data中的每个list赋给iteM
                const item = this.list[i];
                // 把价格和数量相乘给到当前的总价
                total += item.price * item.count;
            }
            // 把价格转成字符串,并使用正则后三们用,分开
            return total.toString().replace(/\B(?=(\d{3})+$)/g, ",");
        }
    },
    methods: {
        // 减
        handleReduce(index) {
            if (this.list[index].count === 1) return;
            this.list[index].count--;
        },
        // 加
        handleAdd(index) {
            this.list[index].count++;
        },
        // 移除
        handleRemove(index) {
            this.list.splice(index, 1);
        },
        // input时时更新
        handleInput(e) {
            this.message = e.target.value;
        },
      
    
};
</script>
<style lang="less" scoped>
    // 作用是取消数据绑定时出现的代码闪烁
    [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: left;
    }
    th {
        background: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
        white-space: nowrap;
    }
    .menu{
        border: 1px solid #ccc;
    }
</style>