Vue: 购物车数量加减按钮

效果图:

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--
  }
  }
}
上一篇:yii之srbac详解


下一篇:ocp认证考试指南第一章