当前位置：首页 > VUE

vue实现按钮加减

2026-03-26 20:09:13VUE

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() {
      if (this.count > 0) this.count--
    }
  }
}
</script>

使用计算属性

当需要限制数值范围或进行复杂计算时：

<template>
  <div>
    <button @click="count = Math.max(0, count - 1)">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

组件化实现

可封装为可复用的计数器组件：

<!-- 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: {
      type: Number,
      default: 0
    }
  },
  emits: ['update:modelValue'],
  methods: {
    change(delta) {
      const newValue = this.modelValue + delta
      if (newValue >= this.min) {
        this.$emit('update:modelValue', newValue)
      }
    }
  }
}
</script>

使用 Composition API

Vue 3 的 setup 语法实现：

vue实现按钮加减

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

<script setup>
import { ref } from 'vue'

const count = ref(0)
const inc = () => count.value++
const dec = () => count.value > 0 && count.value--
</script>

这些方法覆盖了从基础到进阶的实现方式，可根据项目需求选择合适的方案。组件化实现特别适合需要在多个地方复用计数器功能的场景。