如何使用 Vue.js 隐藏 div

发布于02月02日

我希望能够用Vue隐藏一个div，对性能的影响尽可能小，因为网站上有几个div会被这样对待.我该怎么做？

Hide div > Display it when clicking on another div: (Example (without Vue))

With 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
    }
})

推荐答案

正如@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>