web-dev-qa-db-fra.com

Comment cacher div avec Vue.js

Je veux pouvoir masquer une div avec Vue, avec le moins d'impact possible sur les performances, car ce sont quelques div sur le site Web qui seront traitées de cette façon. Comment puis-je faire cela?

Hide div> Affichez-le en cliquant sur un autre div: ( Exemple (sans Vue) )

Avec Vue (ne fonctionne pas)

html

<div id="app" v-on:click="seen = !seen" class="control">
    <p>click app</p>
</div>

<div v-if="seen" id="hide">
<p>hide me </p>
</div>

JavaScript

new Vue({
    el:'#hide',
    data:{
        seen: false
    }
})
htmlvue.js
3
josefdev

Comme @Ferrybig l'a déclaré, Vue ne contrôle que l'élément auquel il est lié et tous ces éléments enfants. Votre élément hide est en dehors de l'élément lié à Vue (app), donc Vue ne peut pas le changer.

Avec un léger changement, votre code fonctionne bien:

<div id="wrapper">
  <div id="app" v-on:click="seen = !seen" class="control">
      <p>click app</p>
  </div>

  <div v-if="seen" id="hide">
    <p>hide me </p>
  </div>
</div>

new Vue({
    el:'#wrapper',
    data:{
        seen: true
    }
});
4
PatrickSteele

Une instance de vue a sa propre portée. Seule sa portée permet de contrôler l'élément.Vous devez vous concentrer sur l'élément à monter. Et une instance, un élément racine.

1
Suyanhanx