Vue js-当值达到0时隐藏减号按钮并取消隐藏加号按钮

Question

想法是当减号按钮被点击到 0 时，我需要隐藏减号按钮然后取消隐藏加号按钮以再次添加值。我在这里尝试过的是我设法实现了减号和加号功能。任何人都可以帮助我还是 vuejs 的新手。

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

Answer 1

您可以使用基于 count 值的 v-show 指令：

new Vue({
  el: '#app',
  data: () => {
    return {
      count: 5
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      if (this.count > 0) {
        this.count--;
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<div id="app">
  <div class="message">
    <p># {{ count }}</p>
    <button v-show="count >= 0" v-on:click.prevent="increment">+</button>
    <button v-show="count > 0" v-on:click.prevent="decrement">-</button>
  </div>
</div>

Answer 2

尝试使用v-if

new Vue({
  el: '#demo',
  data: ()=> {
    return {
      count: 5
    }
  },
  methods: {
    increment () {
      this.count++;
    },
    decrement () {
      if(this.count > 0){
        this.count-- ;
      }
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
      <div class="message"># {{ count }}<br>
        <p># {{ count }}</p>
        <button v-on:click.prevent="increment" >+</button>
        <button v-on:click.prevent="decrement" v-if="count">-</button>
    </div>
</div>

Answer 3

当值为 0 时，您可以这样做以隐藏 -：

<button v-if="count > 0" v-on:click.prevent="decrement">-</button>

Answer 4

如果里面的语句为真，

v-if 将渲染一个元素。并且 v-show 将始终呈现该元素但不会显示它，除非其中的语句为真。

所以如果你像这样在减号按钮上使用 v-if="count > 0" 或 v-show="count > 0"，你应该达到你的目标。

<button v-if="count >= 0" v-on:click.prevent="decrement">-</button>

同样，如果您不想超过 最大值，可以使用 v-if="count < max_value" 或 v-show="count < max_value" 隐藏增加按钮，当计数达到最大值时。

希望这对您有所帮助 :) 有关详细信息，您可以在此处阅读文档：https://vuejs.org/v2/guide/index.html#Conditionals-and-Loops

Vue js-当值达到0时隐藏减号按钮并取消隐藏加号按钮

Vue js- Hide minus button when the value reaches 0 and unhide plus button in

javascript

frontend

click

button

vue.js