html - 如何使用 Vue.js 隐藏 div

Question

我希望能够使用 Vue 隐藏一个 div，对性能的影响尽可能小，因为网站上的几个 div 将以这种方式处理。我该怎么做？

隐藏 div > 当点击另一个 div 时显示它:( Example (without 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
    }
})

Answer 1

正如@Ferrybig 所说，Vue 只能控制它所绑定(bind)的元素和所有这些子元素。您的 hide 元素位于绑定(bind)到 Vue (app) 的元素之外，因此 Vue 无法更改它。

稍作改动，您的代码就可以正常工作:

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>