web-dev-qa-db-ja.com

Vue.jsでdivを非表示にする方法

Vueでdivを非表示にできるようにしたいのですが、この方法で処理されるのはWebサイト上の2つのdivなので、パフォーマンスへの影響はできるだけ少なくします。どうすればいいですか？

divを非表示>別のdivをクリックしたときに表示する：（ 例（Vueなし） ）

Vueで（動作していません）

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
7
josefdev

@Ferrybigが述べたように、Vueはバインド先の要素とそれらのすべての子要素のみを制御します。hide要素はVue（app）そのためVueは変更できません。

わずかな変更で、コードは正常に機能します。

<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
    }
});
10
PatrickSteele

vueインスタンスには独自のスコープがあります。スコープ内でのみ要素を制御できます。マウントする要素に焦点を当てる必要があります。1つのインスタンス、1つのルート要素。

1
Suyanhanx