如何使用 Vue.js 隐藏 div
Posted
技术标签:
【中文标题】如何使用 Vue.js 隐藏 div【英文标题】：How to hide div with Vue.js 【发布时间】：2018-07-12 17:19:32 【问题描述】：我希望能够使用 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
)
【问题讨论】：
Vue 无法更改应用根目录之外的内容 @Ferrybig 你说得对......我忘了包括重要的部分...... Vue 无法切换根元素的显示/隐藏状态，因为 vue 需要至少有 1 个根元素 @Ferrybig 好的，我明白了，只能隐藏 div 中的元素，而不能隐藏 div 本身。 不，你没有得到它。 【参考方案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>【讨论】：
这个解决方案有点危险。因为使用“v-if”，div 元素不会在 DOM 中呈现。可能是v-show更好。【参考方案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;
【讨论】：
【参考方案3】：您可以使用 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>
示例视频展示
<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>
【讨论】：
【参考方案4】：一个vue实例有自己的作用域，只有在它的作用域内，它才能控制元素。你需要关注被挂载的元素。一个实例，一个根元素。
【讨论】：
以上是关于如何使用 Vue.js 隐藏 div的主要内容，如果未能解决你的问题，请参考以下文章
如何显示和隐藏在 vue js 中动态创建的 div（多格式选项卡结构）