vue简单购物车案例

叁歲伎倆 2022-10-26 01:21 269阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

`html代码如下：`

<body>
    <div id="app">
        <div v-if="books.length">
            <table>
                <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in books">
                    <td>{ { item.id}}</td>
                    <td>{ { item.name}}</td>
                    <td>{ { item.date}}</td>
                    
                    <td>{ { item.price | showPrice}}</td>
                    <td>
                        <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
                        { { item.count}}
                        <button @click="increment(index)">+</button>
                    </td>
                    <td>
                        <button @click="removeBook(index)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <h3>总价格: { { totalPrice | showPrice}}</h3>
        </div>
        <div v-else>
            <table>
                <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    购物车为空
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="../Vue_js/vue.js"></script>
    <script src="main.js"></script>
    </body>

`scirpt核心代码如下：`

`css核心代码如下：`

table { 
        margin-top: 10%;
        margin-left: 35%;
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
    }
    th, td { 
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
    }
    
    th { 
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }
    
    h3 { 
        margin-left: 35%;
    }

简洁的遍历方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 1]  
更简洁的遍历方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/c9897bebd9174d32b3e9dea2fa66f2e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/af592b9bea544c83bce0acc117e95b76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/1ebab32ba7e346028409bd7e7ccfe2c4.png