La idea es que cuando se hace clic en el botón menos hasta 0, necesito ocultar el botón menos y luego mostrar el botón más para agregar el valor nuevamente. Lo que he intentado aquí logré hacer la función menos y más. Cualquiera puede ayudar. Todavía soy nuevo en 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>Puede hacer esto para ocultar el - cuando el valor es 0:
<button v-if="count > 0" v-on:click.prevent="decrement">-</button>Puede usar la directiva v-show según el valor de count :
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>Intenta usar 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>