vue 3 实现 购物车增加 减少按钮 (1)

html

                <template>
                  <div class="quantity">
                    <a class="reduce" @click="btnReduce">-</a>
                    <input type="text" class="text" v-model="orderQuantity.count" />
                    <a class="increase" @click="btnIcrease">+</a>
                  </div>
                </template>

js

export default defineComponent({
    
    
  name: '',
    setup() {
    
    
    const orderQuantity = reactive({
    
    
      count: 1,
    });
    const btnReduce = () => {
    
    
      if (orderQuantity.count <= 0) {
    
    
        orderQuantity.count = 0;
      } else {
    
    
        orderQuantity.count -= 1;
      }
    };
    const btnIcrease = () => {
    
    
      orderQuantity.count += 1;
    };
    return {
    
    
      orderQuantity,
      btnReduce,
      btnIcrease,
    };
  },
})