Vue.js如何在数值为0时隐藏减号按钮并重新显示加号按钮

你需要的效果可以直接通过 Vue 内置的 v-show 指令实现，无需额外新增响应式变量，直接复用现有 count 字段做判断即可。

修改后完整代码 #

<template>
  <div class="message"># {{ count }}<br>
    <p># {{ count }}</p>
    <button v-on:click.prevent="increment">+</button>
    <button v-on:click.prevent="decrement" v-show="count > 0">-</button>
  </div>
</template>
    
<script>
export default {
  data: ()=> {
    return {
      count: 5
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      if(this.count > 0) {
        this.count-- ;
      }
    }
  }
}
</script>

改动说明 #

• 仅在减号按钮上新增了 v-show="count > 0" 属性：当 count 等于 0 时自动隐藏减号按钮，count 大于 0 时自动恢复显示。v-show 通过控制元素的CSS display 属性实现显隐，切换频繁的场景下性能优于 v-if，适合这个按钮显隐的场景。
• 加号按钮默认保持常显，完全满足计数到 0 后可以再次点击加值的需求
• 如果后续你需要增加计数上限，达到上限后隐藏加号按钮，只需要给加号按钮绑定 v-show="count < 你的上限值" 即可

内容的提问来源于stack exchange，提问作者Sue A.