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

【问题标题】：Vue js- Hide minus button when the value reaches 0 and unhide plus button inVue js-当值达到0时隐藏减号按钮并取消隐藏加号按钮
【发布时间】：2021-12-09 07:54:22
【问题描述】：

想法是当减号按钮被点击直到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>

【问题讨论】：

标签： javascript vue.js button frontend click

【解决方案1】：

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" 隐藏 increment 按钮计数已满。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：