使用vue.js制作简易购物车

最新推荐文章于 2024-05-28 18:30:26 发布

桂花载酒少年游_

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1.1k

点赞数 5

分类专栏： vue案例文章标签： java javascript 前端

本文链接：https://blog.csdn.net/qq_59138504/article/details/130181795

版权

项目需求：使用Vue.js制作购物车，要求单击“+”“-”按钮对应数量可改变，相对应的总价也会重新计算可改变;当某个商品数量减为0时，其“_”按钮为不可用状态。（可以对商品进行更改数量，加减按钮和移除商品，对应总价格实现自动计算。对每一项商品进行删除操作，当商品删除完后，会有一个显示购物车为空的提示字）

具体实现代码如下：

 <div>
        <div v-if="books.length">
            <table border="1" align="center" width="500">
                <caption>
                    <h2>购物车</h2>
                </caption>
                <thead>
                    <tr>
                        <th></th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>数量</th>