vue实现数量加减

Vue 实现数量加减功能

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

基础实现方式

创建一个简单的计数器组件，包含增加和减少按钮：

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

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

带最小值和最大值的限制

增加最小值（min）和最大值（max）的限制：

<template>
  <div>
    <button @click="decrement" :disabled="count <= min">-</button>
    <span>{{ count }}</span>
    <button @click="increment" :disabled="count >= max">+</button>
  </div>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      count: this.min
    }
  },
  methods: {
    increment() {
      if (this.count < this.max) {
        this.count++
      }
    },
    decrement() {
      if (this.count > this.min) {
        this.count--
      }
    }
  }
}
</script>

使用 v-model 实现双向绑定

通过 v-model 实现父组件和子组件的双向数据绑定：

<!-- 父组件 -->
<template>
  <div>
    <counter v-model="quantity" :min="1" :max="10" />
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  components: {
    Counter
  },
  data() {
    return {
      quantity: 1
    }
  }
}
</script>

<!-- 子组件 Counter.vue -->
<template>
  <div>
    <button @click="decrement" :disabled="value <= min">-</button>
    <span>{{ value }}</span>
    <button @click="increment" :disabled="value >= max">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 10
    }
  },
  methods: {
    increment() {
      if (this.value < this.max) {
        this.$emit('input', this.value + 1)
      }
    },
    decrement() {
      if (this.value > this.min) {
        this.$emit('input', this.value - 1)
      }
    }
  }
}
</script>

使用计算属性

通过计算属性来处理加减逻辑：

<template>
  <div>
    <button @click="currentCount = currentCount - 1" :disabled="isMin">-</button>
    <span>{{ currentCount }}</span>
    <button @click="currentCount = currentCount + 1" :disabled="isMax">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 10
    }
  },
  computed: {
    currentCount: {
      get() {
        return this.value
      },
      set(val) {
        if (val >= this.min && val <= this.max) {
          this.$emit('input', val)
        }
      }
    },
    isMin() {
      return this.currentCount <= this.min
    },
    isMax() {
      return this.currentCount >= this.max
    }
  }
}
</script>

样式优化版本

增加一些基础样式使组件更美观：

<template>
  <div class="quantity-selector">
    <button 
      class="quantity-btn" 
      @click="decrement" 
      :disabled="count <= min"
    >-</button>
    <span class="quantity-value">{{ count }}</span>
    <button 
      class="quantity-btn" 
      @click="increment" 
      :disabled="count >= max"
    >+</button>
  </div>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 10
    },
    value: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      count: this.value
    }
  },
  watch: {
    value(newVal) {
      this.count = newVal
    }
  },
  methods: {
    increment() {
      if (this.count < this.max) {
        this.count++
        this.$emit('input', this.count)
      }
    },
    decrement() {
      if (this.count > this.min) {
        this.count--
        this.$emit('input', this.count)
      }
    }
  }
}
</script>

<style scoped>
.quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.quantity-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity-value {
  width: 40px;
  text-align: center;
  font-size: 16px;
}
</style>

这些实现方式可以根据具体需求进行选择和调整，适用于购物车商品数量选择、表单输入等场景。