时间戳

首页 > 解决方案 > Vue js-当值达到0时隐藏减号按钮并取消隐藏加号按钮

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

问题描述

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

标签： javascriptvue.jsbuttonfrontendclick

解决方案

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

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

推荐阅读