Condition réactive dans Vue
Rendons la condition réactive. Par exemple, faisons en sorte que l'élément se cache lors d'un clic sur un bouton. Supposons que nous ayons le paragraphe suivant :
<template>
<p v-if="visible">text</p>
</template>
Faisons en sorte que notre paragraphe soit initialement affiché :
data() {
return {
visible: true,
}
}
Créons maintenant un bouton sur lequel cliquer pour masquer le paragraphe :
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
La méthode liée changera la
propriété visible à false,
forçant ainsi notre
paragraphe à se cacher :
methods: {
hide: function() {
this.visible = false;
}
}
Un paragraphe et un bouton sont donnés. Supposons que le paragraphe soit initialement caché. Créez un bouton qui affichera le paragraphe.
Un paragraphe et deux boutons sont donnés. Supposons que le premier bouton affiche le paragraphe, et le second - le cache.
Modifiez la tâche précédente afin que un seul des boutons soit toujours visible à l'écran : si le paragraphe est affiché, alors le bouton pour le cacher, et s'il est caché - alors le bouton pour l'afficher.
