Basta ya de buscar en otras webs ya que llegaste al espacio exacto, contamos con la solución que deseas pero sin complicaciones.
Solución:
En primer lugar, jQuery funciona de forma inmediata. Esta es una diferencia principal. Por lo tanto, debe inicializar su componente o aplicación Vue. Está vinculando ese componente con sus datos a una etiqueta HTML específica dentro de su plantilla. En este ejemplo, el elemento especificado es
y está dirigido a través de el: #app. Esto lo sabrás por jQuery.
Después de eso, declara alguna variable que mantiene el estado de alternancia. En este caso lo es isHidden. El estado inicial es false y tiene que ser declarado dentro del data objeto.
El resto es código específico de Vue como v-on:click="" y v-if="". Para una mejor comprensión, lea la documentación de Vue:
- La instancia de Vue https://vuejs.org/v2/guide/instance.html
- Sintaxis de plantilla https://vuejs.org/v2/guide/syntax.html
- Gestión de eventos https://vuejs.org/v2/guide/events.html#Listening-to-Events
- Condicionales https://vuejs.org/v2/guide/conditional.html
Le recomiendo que lea en este orden si desea obtener una descripción general rápida. Pero considere leer la totalidad o al menos partes más largas de la documentación para una mejor comprensión.
var app = new Vue(
el: '#app',
data:
isHidden: false
)
Hide me on click event!
Esta es una pregunta muy básica de Vue. Le sugiero que lea la guía, incluso la primera página responderá a su pregunta.
Sin embargo, si aún necesita la respuesta, así es como oculta/muestra elementos en Vue.
new Vue(
el: '#app',
data ()
return
toggle: true
,
)
showing
Hide me on click event!
name: "Modal",
data ()
return
isHidden: false
Aquí puedes ver las comentarios y valoraciones de los usuarios
Recuerda que te brindamos la opción de interpretar si diste con el arreglo.