vue 简单购物车

最新推荐文章于 2022-07-09 18:24:05 发布

Andy_Singh

最新推荐文章于 2022-07-09 18:24:05 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Andy_Singh/article/details/98953507

本文详细介绍了一个使用Vue.js实现的购物车应用，展示了如何添加、删除商品，调整购买数量及计算总价。通过具体代码实例，读者可以学习到Vue的数据绑定、事件处理及组件化的实践方法。

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

实现购物车添加删除，计算总价，直接上代码

Html部分

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <table>
    <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
    </tr>
    <tr v-for="iphone in Ip_Json">
        <td>{{ iphone.id }}</td>
        <td>{{ iphone.name }}</td>
        <td>{{ iphone.price }}</td>
        <td>
        <!-- v-bind:disabled 数量不能小于0  -->
        <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>
        {{ iphone.count }}
        <button v-on:click="iphone.count+=1">+</button>
        </td>
        <td>
        <button v-on:click="iphone.count=0">移除</button>
        </td>
    </tr>
    </table>
    总价：${{totalPrice()}}
</div>

js部分

var app = new Vue({
  el: '#app',
  data: {
    Ip_Json: [{
      id: 1,
      name: 'iphone 8',
      price: 5099,
//count,购买的数量
      count: 1
    },
              {
                id: 2,
                name: 'iphone xs',
                price: 8699,
                count: 1
              },
              {
                id: 3,
                name: 'iphone xr',
                price: 6499,
                count: 1
              }]

  },
  methods:{
    totalPrice : function(){
      var totalP = 0;
      for (var i = 0,len = this.Ip_Json.length;i<len;i++) {
        totalP+=this.Ip_Json[i].price*this.Ip_Json[i].count;
      }
      return totalP;
    }


  }
})

Css部分

table {
    border: 1px solid black;
}
table {
    width: 100%;
}

th {
    height: 50px;
}
th, td {
    border-bottom: 1px solid #ddd;
}

效果图：