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>

带输入框的实现

<template>
  <div>
    <button @click="decrement">-</button>
    <input v-model.number="count" type="number">
    <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 @mousedown="startDecrement" @mouseup="stopAction">-</button>
    <span>{{ count }}</span>
    <button @mousedown="startIncrement" @mouseup="stopAction">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      interval: null
    }
  },
  methods: {
    startIncrement() {
      this.interval = setInterval(() => {
        this.count++
      }, 100)
    },
    startDecrement() {
      this.interval = setInterval(() => {
        this.count--
      }, 100)
    },
    stopAction() {
      clearInterval(this.interval)
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

使用计算属性的实现

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

<script>
export default {
  data() {
    return {
      count: 0,
      step: 1
    }
  },
  computed: {
    displayCount() {
      return this.count.toFixed(2)
    }
  }
}
</script>

以上实现方式可以根据具体需求进行组合和调整，Vue 的响应式系统会自动处理数据变化和视图更新。