Ayer comencé a trabajar con Vue y ya he aprendido bastante. Ahora que he visto, puede alternar clases directamente en el objeto HTML a través del evento @click.
Desafortunadamente, realmente no tengo éxito. Con Blank Javascript no hay problema, pero quiero implementar esto con Vue.
<li @click=" show = !show" :class="{ active: show }" class="nav-item dropdown"> setup() { const show = false return { show }; },En esto está "mostrar" la clase que quiero alternar.
Esto puede estar funcionando bien
<script> import { ref } from 'vue' export default { setup() { const show = ref(false) return { show } } } </script> <template> <li @click="show = !show" :class="{ active: show }" class="nav-item dropdown">toggle me</li> </template> <style> .active { background-color: red; } </style>Esta también es una sintaxis válida por cierto
<script setup> import { ref } from 'vue' const show = ref(false) </script> También puede usar :class="show && 'active'" si prefiere no tener que invertir/pensar en el orden real cada vez (preferencia personal, exactamente lo mismo al final).