【第二届青训营-寒假前端场】--vue实现购物车页面之数量增减

199 阅读1分钟

购物车之数量增减具体实现重点

数量增减实现

需要按钮实现添加数量和删除数量,同时数量可以直接修改。 此案例使用v-on:click实现点击的事件绑定,直接根据按钮点击修改数量。

@click="item.count--"
@click="item.count++"

数量直接使用v-model与数据进行绑定

<input type="text" class="cart-num" v-model="item.count">

数量范围实现

本案例使用v-bind:disabled实现了数量在不正常的范围之前禁用按钮,

  • 数量到1时减少的按钮失效:
    • 当点击减少数量的按钮时触发函数判断是数量从而返回按钮状态(是否禁用)
  • 数量等于库存数时增加按钮失效
    • 当点击增加数量的按钮时触发函数判断数量与库存的关系从而返回按钮状态

待实现

增加和减少按钮的长按功能