vue 实现 商品购买数量加减

页面数据

            <div class="number layui-form">
              <label>数量</label>
              <div class="layui-input-inline btn-input">
                <button class="layui-btn layui-btn-primary " @click="editCount(-1)" :disabled="buyCount==1">-</button>
                <input type="number" class="layui-input" v-model="buyCount">
                <button class="layui-btn layui-btn-primary " @click="editCount(1)" :disabled="buyCount==productInfo.stock">+</button>
              </div>
              <p class="inputTips">已超出库存数量！</p>
            </div>

在data中定义变量

 //购买数量
buyCount:1  //默认购买1个

在methods中定义方法实现：

         //购买数量+  -
          editCount(count){
            this.buyCount=this.buyCount+count;
          },

创建购物数量监听

//购物数量监听
      watch:{
          buyCount:function (newValue,oldValue) {
            //this.productInfo.stock  数据库现有库存
            if(parseInt(newValue)> this.productInfo.stock){
              this.buyCount = this.productInfo.stock;
            }else if(parseInt(newValue)<1){
              this.buyCount = 1;
            }else if(isNaN(newValue)){
              this.buyCount = 1;
            } else {
              this.buyCount=parseInt(newValue);
            }
          }
      }

去掉type=“number” 自带的上下按钮箭头

<style scoped>

  input[type=number] {
     -moz-appearance:textfield;
   }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>