K20230210 - 购物车添加删除 +商品清空 / html/css/vue/jquery

最新推荐文章于 2023-08-19 14:30:50 发布

小炒面

最新推荐文章于 2023-08-19 14:30:50 发布

阅读量311

点赞数 1

分类专栏：练习作业文章标签： vue.js jquery html javascript css

本文链接：https://blog.csdn.net/qq_43572555/article/details/128980615

版权

这篇博客详细介绍了如何使用HTML、CSS、JavaScript、Vue.js和jQuery实现购物车功能，包括商品的添加删除、数量增减以及总价的实时更新。在JS部分，实现了商品编号的自动排序，当商品数量为0时，减号按钮会变为不可用。此外，还涵盖了商品清空功能的代码和实现，当商品数量为0时，会显示提示信息。

摘要由CSDN通过智能技术生成

1. 购物车

1.1 HTML

<div >
        <h2>购物车！！！！！</h2> <button @click="addItem()">增加</button>
        <input type="text" v-model="name" placeholder="物品名称" @focus="isRightName()" onblur="s.isRightName()"> <a >{
  {isName}}</a>
        <input type="text" v-model="price" placeholder="物品价格" @focus="isRightPrice()" onblur="s.isRightPrice()"><a>{
  {isPrice}}</a>
        <table cellspacing="0" >  
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>单价</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(it,index) in list">
                <td>{
  {index + 1}}</td>
                <td>{
  {it.name}}</td>
                <td>{
  {it.price}}</td>
                <td>
                    <button class="jia" @click="sub(it.id)" :style="it.state">-</button>
                    <span>{
  {it.num}}</span>
                    <button class="jian" @click="add(it.id)">+</button>
                </td>
                <td><button @click="remove(index)">刪除</button></td>
            </tr>       
        </table>
        <p style="width