vue实现按钮加减

Vue 实现按钮加减功能

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

基础实现

通过 v-model 绑定数据，使用 @click 监听按钮点击事件：

<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>

带最小值和最大值限制

可以添加逻辑限制数值的范围：

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

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

使用计算属性

通过计算属性动态控制按钮的禁用状态：

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

<script>
export default {
  data() {
    return {
      count: 0,
      min: 0,
      max: 10
    }
  },
  computed: {
    isMin() {
      return this.count <= this.min
    },
    isMax() {
      return this.count >= this.max
    }
  },
  methods: {
    increment() {
      if (!this.isMax) {
        this.count++
      }
    },
    decrement() {
      if (!this.isMin) {
        this.count--
      }
    }
  }
}
</script>

封装为组件

可以将功能封装为可复用的组件：

<template>
  <div>
    <button @click="decrement" :disabled="isMin">-</button>
    <span>{{ modelValue }}</span>
    <button @click="increment" :disabled="isMax">+</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 10
    }
  },
  emits: ['update:modelValue'],
  computed: {
    isMin() {
      return this.modelValue <= this.min
    },
    isMax() {
      return this.modelValue >= this.max
    }
  },
  methods: {
    increment() {
      if (!this.isMax) {
        this.$emit('update:modelValue', this.modelValue + 1)
      }
    },
    decrement() {
      if (!this.isMin) {
        this.$emit('update:modelValue', this.modelValue - 1)
      }
    }
  }
}
</script>

使用时：

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

这些方法可以根据实际需求选择或组合使用，实现灵活的按钮加减功能。