当前位置：首页 > VUE

vue实现加减数量

2026-02-21 22:07:06VUE

Vue 实现加减数量

在 Vue 中实现加减数量的功能通常涉及数据绑定、事件处理和响应式更新。以下是实现方法：

数据定义

在 Vue 组件的 data 或 setup 中定义数量变量：

data() {
  return {
    quantity: 1 // 初始值
  }
}

或（Composition API）：

const quantity = ref(1);

模板绑定

在模板中绑定数量并添加加减按钮：

<div>
  <button @click="decrement">-</button>
  <span>{{ quantity }}</span>
  <button @click="increment">+</button>
</div>

方法实现

定义增减方法，确保最小值限制（如不小于1）：

methods: {
  increment() {
    this.quantity++;
  },
  decrement() {
    if (this.quantity > 1) {
      this.quantity--;
    }
  }
}

或（Composition API）：

const increment = () => quantity.value++;
const decrement = () => {
  if (quantity.value > 1) quantity.value--;
};

输入框联动

若需支持手动输入，可添加输入框并双向绑定：

<input 
  type="number" 
  v-model.number="quantity" 
  min="1" 
  @change="validateInput"
>

验证方法：

validateInput() {
  if (this.quantity < 1) this.quantity = 1;
}

完整示例（Options API）

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ quantity }}</span>
    <button @click="increment">+</button>
    <input 
      type="number" 
      v-model.number="quantity" 
      min="1" 
      @change="validateInput"
    >
  </div>
</template>

<script>
export default {
  data() {
    return { quantity: 1 }
  },
  methods: {
    increment() { this.quantity++ },
    decrement() { if (this.quantity > 1) this.quantity-- },
    validateInput() { if (this.quantity < 1) this.quantity = 1 }
  }
}
</script>