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