vue实现按钮加减

Vue 实现按钮加减功能

在 Vue 中实现按钮加减功能通常涉及以下步骤：

模板部分

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

脚本部分

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

样式部分

<style>
button {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
}
</style>

添加限制条件

如果需要限制加减范围，可以修改方法：

methods: {
  increment() {
    if (this.count < 10) {
      this.count++
    }
  },
  decrement() {
    if (this.count > 0) {
      this.count--
    }
  }
}

使用计算属性

对于更复杂的逻辑，可以使用计算属性：

computed: {
  isMax() {
    return this.count >= 10
  },
  isMin() {
    return this.count <= 0
  }
}

然后绑定到按钮的disabled属性：

<button @click="decrement" :disabled="isMin">-</button>
<button @click="increment" :disabled="isMax">+</button>

使用v-model

如果与表单结合，可以使用v-model：

<input type="number" v-model.number="count">
<button @click="count--">-</button>
<button @click="count++">+</button>

组件化实现

对于可复用的计数器组件：

// Counter.vue
<template>
  <div>
    <button @click="change(-step)">-</button>
    <span>{{ modelValue }}</span>
    <button @click="change(step)">+</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: Number,
    step: {
      type: Number,
      default: 1
    },
    min: Number,
    max: Number
  },
  methods: {
    change(delta) {
      let newValue = this.modelValue + delta
      if (this.min !== undefined) newValue = Math.max(this.min, newValue)
      if (this.max !== undefined) newValue = Math.min(this.max, newValue)
      this.$emit('update:modelValue', newValue)
    }
  }
}
</script>

使用时：

<Counter v-model="count" :min="0" :max="10" :step="2" />