如何使用 Vue.js 隐藏 div

Question

我希望能够用 Vue 隐藏一个 div，对性能的影响尽可能小，因为网站上的几个 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
    }
})

原文由 josefdev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如@Ferrybig 所说，Vue 只能控制它绑定到的元素和所有这些子元素。您的 hide 元素在绑定到 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>

原文由 PatrickSteele 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我建议使用“v-show”或“:class”来有效地隐藏组件。根据我自己的经验，在一些奇怪的情况下，v-show 可能会导致 ag-grid 组件进入错误的数据表但是使用“：class”时没有问题。

模板代码可以是：

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

要么

<div :class="{ hide: !seen }" id="hide">
   <p>hide me </p>
</div>

使用 CSS

 .hide {
    visibility: hidden !important;
}

原文由 Houcheng 发布，翻译遵循 CC BY-SA 4.0 许可协议