vue 实现数量加减

实现数量加减功能

在Vue中实现数量加减功能可以通过数据绑定和事件处理来完成。以下是几种常见的实现方式：

基础实现方式

使用v-model绑定数据，配合加减按钮的点击事件：

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

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

带最小值和最大值限制

添加边界检查，防止数量超出合理范围：

<template>
  <div>
    <button @click="changeCount(-1)" :disabled="count <= min">-</button>
    <span>{{ count }}</span>
    <button @click="changeCount(1)" :disabled="count >= max">+</button>
  </div>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    changeCount(step) {
      const newCount = this.count + step
      if (newCount >= this.min && newCount <= this.max) {
        this.count = newCount
      }
    }
  }
}
</script>

使用计算属性

通过计算属性来处理更复杂的逻辑：

<template>
  <div>
    <button @click="count--" :disabled="isMin">-</button>
    <input v-model.number="count">
    <button @click="count++" :disabled="isMax">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      min: 1,
      max: 10
    }
  },
  computed: {
    isMin() {
      return this.count <= this.min
    },
    isMax() {
      return this.count >= this.max
    }
  }
}
</script>

封装为可复用组件

将计数器功能封装为独立的组件：

<template>
  <div class="quantity-selector">
    <button class="qty-btn minus" @click="decrease" :disabled="value <= min">
      -
    </button>
    <input 
      type="number" 
      class="qty-input" 
      v-model.number="currentValue" 
      :min="min" 
      :max="max"
      @change="handleInputChange"
    >
    <button class="qty-btn plus" @click="increase" :disabled="value >= max">
      +
    </button>
  </div>
</template>

<script>
export default {
  name: 'QuantitySelector',
  props: {
    value: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 99
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.currentValue = newVal
    },
    currentValue(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    increase() {
      if (this.currentValue < this.max) {
        this.currentValue++
      }
    },
    decrease() {
      if (this.currentValue > this.min) {
        this.currentValue--
      }
    },
    handleInputChange() {
      if (this.currentValue < this.min) {
        this.currentValue = this.min
      } else if (this.currentValue > this.max) {
        this.currentValue = this.max
      }
    }
  }
}
</script>

使用Vuex管理状态

当需要全局共享数量状态时，可以使用Vuex：

// store.js
export default new Vuex.Store({
  state: {
    quantity: 1
  },
  mutations: {
    incrementQuantity(state) {
      state.quantity++
    },
    decrementQuantity(state) {
      if (state.quantity > 1) {
        state.quantity--
      }
    }
  }
})

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

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['quantity'])
  },
  methods: {
    ...mapMutations([
      'incrementQuantity',
      'decrementQuantity'
    ]),
    increment() {
      this.incrementQuantity()
    },
    decrement() {
      this.decrementQuantity()
    }
  }
}
</script>

这些实现方式可以根据具体需求选择使用，基础版本适合简单场景，封装组件版本适合需要复用的场景，Vuex版本适合全局状态管理。