当前位置：首页 > VUE

vue实现数量加减

2026-01-19 13:13:18VUE

Vue 实现数量加减功能

在 Vue 中实现数量加减功能可以通过数据绑定和事件处理来完成。以下是具体实现方法：

数据定义

在 Vue 实例的 data 中定义一个变量来存储当前数量值：

vue实现数量加减

data() {
  return {
    quantity: 1
  }
}

模板部分

在模板中添加加减按钮和显示区域，使用 v-model 绑定数量值：

<div>
  <button @click="decrement">-</button>
  <input type="text" v-model.number="quantity" min="1">
  <button @click="increment">+</button>
</div>

方法实现

在 methods 中定义加减方法，确保数量不会低于最小值：

vue实现数量加减

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

完整组件示例

<template>
  <div>
    <button @click="decrement">-</button>
    <input type="text" v-model.number="quantity" min="1">
    <button @click="increment">+</button>
  </div>
</template>

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

增强功能

可以添加输入验证和限制最大值：

watch: {
  quantity(newVal) {
    if (newVal < 1) {
      this.quantity = 1
    } else if (newVal > 100) {
      this.quantity = 100
    }
  }
}

样式优化

添加 CSS 样式使组件更美观：

button {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  cursor: pointer;
}

input {
  width: 50px;
  text-align: center;
  margin: 0 5px;
}