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>v-if representará un elemento si la declaración interna es verdadera. Y v-show siempre representará el elemento, pero no lo mostrará a menos que la declaración interna sea verdadera.
Entonces, si usa v-if="count > 0" o v-show="count > 0" en el botón menos, debería lograr su objetivo.
<button v-if="count >= 0" v-on:click.prevent="decrement">-</button> Del mismo modo, si tiene un valor máximo que no desea exceder, puede usar v-if="count < max_value" o v-show="count < max_value" para ocultar el botón de incremento cuando el conteo está al máximo.
Espero que esto ayude :) Para obtener más información, puede leer los documentos aquí: https://vuejs.org/v2/guide/index.html#Conditionals-and-Loops
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>