当前位置：首页 > VUE

vue实现点击加减

2026-01-17 10:37:42VUE

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>

限制范围

添加最小值/最大值限制：

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

输入框联动

结合输入框实现双向绑定：

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

组件化封装

创建可复用的计数器组件：

<!-- Counter.vue -->
<template>
  <div class="counter">
    <button @click="change(-1)">-</button>
    <span>{{ value }}</span>
    <button @click="change(1)">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    }
  },
  methods: {
    change(delta) {
      const newValue = this.value + delta
      if (newValue >= this.min && newValue <= this.max) {
        this.$emit('input', newValue)
      }
    }
  }
}
</script>

使用计算属性

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

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

动画效果

添加过渡动画：

<transition name="fade">
  <span :key="count">{{ count }}</span>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>