web-dev-qa-db-fra.com

Hide div onclick in Vue

Comment puis-je masquer un élément avec Vue.js quand il est cliqué? Il n'y a qu'un élément à cacher.

Une solution jQuery ressemblerait à ceci:

$('.button').click(function() {
  $('.hideme').hide();
);

Mais quel est l'équivalent de Vue.js?

javascriptvue.jsfrontend
3
Victor Berland

Tout d'abord, jQuery fonctionne hors de la boîte. Ceci est une différence principale. Vous devez donc initialiser votre composant Vue ou votre application. Vous liez ce composant avec ses données à une balise HTML spécifique dans votre modèle. Dans cet exemple, l'élément spécifié est <div id="app"></div> et est ciblé via el: #app. Vous le saurez de jQuery.

Après cela, vous déclarez une variable qui contient l'état de basculement. Dans ce cas, c'est isHidden. L'état initial est false et doit être déclaré à l'intérieur de l'objet data.

Le reste est du code spécifique à Vue tel que v-on:click="" et v-if="". Pour mieux comprendre, veuillez lire la documentation de Vue: 

Je vous recommande de lire dans cet ordre si vous souhaitez obtenir un aperçu rapide. Mais envisagez de lire la totalité ou au moins des parties plus longues de la documentation pour une meilleure compréhension.

var app = new Vue({
  el: '#app',
  data: {
    isHidden: false
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isHidden = true">Hide the text below</button>
  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>
  
  <h1 v-if="!isHidden">Hide me on click event!</h1>
</div>

10
Michael Czechowski

C'est une question très basique de Vue. Je vous suggère de lire le guide, même la première page répondra à votre question. 

Cependant, si vous avez toujours besoin de la réponse, voici comment masquer/afficher les éléments dans Vue. 

new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div v-show='toggle'>showing</div>
</div>

2
samayo
<div>
    <div>

        <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>

        <h1 v-if="!isHidden">Hide me on click event!</h1>
    </div>
</div>

name: "Modal",
    data () {
        return {
            isHidden: false
        }
    }
0
Adam Colton