Html 如何使用 Vue.js 隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48578738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide div with Vue.js
提问by josefdev
I want to be able to hide a div with Vue, with as little impact on performance as possible, since it's a couple of divs on the website that will be treated this way. How do I do this?
我希望能够用 Vue 隐藏一个 div，对性能的影响尽可能小，因为网站上的几个 div 将被这样处理。我该怎么做呢？
Hide div > Display it when clicking on another div:(Example (without Vue))
隐藏DIV>上的另一个DIV点击时显示它：（实施例（无Vue公司））
With Vue(not working)
使用 Vue（不工作）
html
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
JavaScript
new Vue({
el:'#hide',
data:{
seen: false
}
})
回答by PatrickSteele
As @Ferrybig stated, Vue only has control over the element it's bound to and all of those child elements. Your hideelement is outside the element bound to Vue (app) so Vue cannot change it.
正如@Ferrybig 所说，Vue 只能控制它绑定到的元素和所有这些子元素。您的hide元素位于绑定到 Vue ( app)的元素之外，因此 Vue 无法更改它。
With a slight change, your code works fine:
稍加改动，您的代码就可以正常工作：
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>回答by Suyanhanx
An vue instance has its own scope.Only in its scope, it can control the element.You need to focus on the element which be mounted.And one instance, one root element.
一个vue实例有自己的作用域，只有在自己的作用域内，才能控制元素。需要关注挂载的元素，一个实例，一个根元素。
