我希望能够使用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
}
})
Pat*_*ele 11
如@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
}
});
我建议使用“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;
}
您可以使用 v-if-else 或 v-show，它们以不同的方式工作。v-if, v-else 会将您的 HTML 元素附加/分离到其根元素。另一方面，v-show 将使用 style="display:none;",
示例：v-if、v-else
<body>
<div id = 'app'>
<button @click="show = !show">Click</button>
<p v-if="show">
v-if value of show is: {{show}}
</p>
<p v-else>
v-else value of show is: {{show}}
</p>
</div>
<script>
const app = new Vue({
el:'#app',
data: function(){
return{
show: true
}
}
});
</script>
</body>
示例 v-show
<body>
<div id = 'app'>
<button @click="show = !show">Click</button>
<p v-show="show">
v-show works with style="display:none;"
</p>
</div>
<script>
const app = new Vue({
el:'#app',
data: function(){
return{
show: true
}
}
});
</script>
</body>
| 归档时间： |
|
| 查看次数： |
27381 次 |
| 最近记录： |