vue实现模拟购物车买东西
先看看实现的效果:
在页面上展示的效果就是这个样子,有商品的编号、商品的名称、商品的单价、商品的数量、每一件商品的总价,以及,共计多少¥?
同样的商品可以重复多次购买,在商品数量那,有-或+,用户可以进行多次购买,买多了想减多少就减多少,但是当用户不想购买商品时,减商品减到0时,就不能继续减了!给了一个弹窗,提示,用户不能再继续减了
不多说了,来看具体实现代码:
HTML架构部分
<!-- HTML架构 -->
<div id="container">
<center>
<h3
style="text-align: center;border: 1px solid rgb(224, 230, 230);width: 300px;height: 26px;color: rgb(190, 197, 197);border-radius: 50px;">
购物车平台</h3>
</center>
<table
style="width: 1080px;border-top: 1px solid rgb(224, 230, 230);border-bottom: 1px solid rgb(224, 230, 230);">
<tr>
<td class="tdele">编号</td>
<td class="tdele">名称</td>
<td class="tdele">单价</td>
<td class="tdele">数量</td>
<td class="tdele">总价</td>
</tr>
<!-- 使用v-for -->
<tr v-for="(item,index) in items">
<!-- 对应编号 -->
<td>{
{
item