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

Question

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

<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

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

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

Answer 2

您可以使用基于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 3

尝试使用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 4

v-if将呈现元素。v-show将始终呈现元素，但不会显示它，除非其中的语句为true

因此，如果你像这样在减号按钮上使用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://v2.vuejs.org/v2/guide/index.html#Conditionals-和环路