Vue: 购物车数量加减按钮


效果图:

HTML:

<div class="label">
    <p class="buy_num">购买数量</p>
    <button class="btn_minute" @click="btnMinute">-</button>
    <input type="text" value="0" size="1" v-model="count">
    <button class="btn_add" @click="btnAdd">+</button>
</div>

VUE:

methods: {
  /*
  * 购买数量按钮+
  */
  btnAdd (count) {
   // 如果是低价商品,则限购
    if (this.vegas_id) {
      Toast('优惠商品限购一件哦~')
    } else {
    // 如果数量大于商品库存
     if (this.count >= this.stock) {
        Toast('该宝贝不能购买更多了~')
      } else {
        this.count++
      }
    }
  },
  /*
  * 购买数量按钮-
  */
  btnMinute (count) {
    if (this.count <= 1) {
      Toast('该宝贝不能减少了哟~')
    } else {
      this.count--
    }
  }
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM