vue中如何隐藏元素

隐藏和显示网页上的元素是一项经常发生的与用户界面有关的任务。你可能想切换一些细节部分、工具提示等的可见性。

• 当元素被完全从DOM中移除时，使用v-if 。
• 当元素被隐藏时，使用display: none ，由v-show 。
• 使用:class 绑定应用visibility: hidden 。

1.使用v-if隐藏

v-if 是一个内置的Vue指令，接受布尔值。

html

<div v-if="value">I am an element</div>

v-if 处理显示/隐藏元素的方法如下。

A) 如果提供给v-if 的值是true （或者一般是一个真值），那么该元素就被插入到DOM中。

B) 否则，如果提供给v-if 的值是false （或者一般是一个假的值），那么该元素就不会被插入到DOM中。

让我们考虑下面的例子。

vue

<template> <div v-if="value1">I'm rendered!</div> <div v-if="value2">I'm not rendered!</div> </template> <script> export default { data() { return { value1: true, value2: false } } }; </script>

当上述组件运行时，下面是插入到网页中的HTML内容。

html

<div>I'm rendered!</div>

第一个元素被渲染了，因为v-if="value1" ，提供了一个true 的值。然而，第二个元素并没有被渲染到DOM中，因为v-if="value2" 被提供了一个false 。

简单地说，v-if 指令允许你显示或隐藏元素，只需在DOM中插入或不插入该元素。非常简单。

1.1 何时使用v-if

当v-if 指令与false ，Vue也不会初始化元素上的事件监听器，即使你明确使用事件指令。

v-if 与 （在下一节介绍）相比，toggling的成本相对较高（因为每次你改变 的值，元素就会从DOM中插入/移出，同时事件监听器也会被初始化/取消初始化）。但如果元素最初是隐藏的，它的初始化成本很低。v-show v-if

你可以在那些不经常切换可见性并且最初是隐藏的元素上使用v-if 。例如，显示/隐藏一个有实体详细信息的部分。

挑战：如果用0 ，v-if 会呈现这个元素吗？那么'0' 呢？

2.使用v-show隐藏

通常情况下，保持元素在DOM中的存在，但使用CSS样式在视觉上隐藏它是很有用的。

v-show v-show是一个内置指令，可以在视觉上显示或隐藏该元素。

html

<div v-show="value">I am an element</div>

v-show 处理显示该元素的方法如下:

A) 如果提供给v-show 的值是true （或truthy），那么该元素是可见的。

B) 否则，如果提供给v-show 的值是false （或falsy），那么该元素被隐藏，但仍在DOM中被呈现。

让我们看一下下面的例子。

vue

<template> <div v-show="value1">I'm visible!</div> <div v-show="value2">I'm hidden!</div> </template> <script> export default { data() { return { value1: true, value2: false } } }; </script>

当你运行上述组件时，两个元素都被渲染到DOM中。

html

<div>I'm visible!</div> <div style="display: none;">I'm hidden!</div>

第一个元素在屏幕上是可见的。然而，第二个元素是隐藏的，因为Vue应用了display: none inline style，这要感谢v-show="false" 。

display: none 应用于一个元素的内联样式使该元素完全消失。

挑战：你如何在Vue中实现一个按钮来切换一个元素的显示？请在评论中分享你的解决方案!

2.1 何时使用v-show

v-show，当与false ，应用display: none 内联样式，并在视觉上隐藏元素，几乎不对DOM进行修改。

因此，使用v-show 来切换元素的可见性是相对便宜的（与上面描述的v-if 相比），所以你可以对一个经常切换可见性的元素使用这个指令。

3.隐藏但保留空间

如果你需要隐藏元素的内容，同时保留它所占据的空间呢？隐藏元素内容但保留其空间的CSS样式是visibility: hidden 。

不幸的是，你不能使用v-show 指令，因为它只应用display: none 样式。

但一个可行的解决方案是使用:class 绑定，这在Vue中是相当灵活的。当对象字面意思{ className: boolValue } 被分配到:class ，如果boolValue 是true ，Vue会把"className" 作为一个类应用到元素上。

让我们创建一个具有visibility: hidden 样式的CSS类invisible 。然后，使用:class 绑定和一个对象字面，你可以将invisible 类应用于一个元素。

vue

<template> <div :class="{ invisible: !value1 }">I'm visible!</div> <div :class="{ invisible: !value2 }">Only my space is visible!</div> <div>Dummy text</div> </template> <script> export default { data() { return { value1: true, value2: false } } }; </script> <style> .invisible { visibility: hidden; } </style>

打开演示，你会看到元素I'm visible和Dummy text，以及两者之间的一个空格--隐藏的第二个元素。

上面的例子渲染了HTML内容。

html

<div class="">I'm visible!</div> <div class="invisible">Only my space is visible!</div> <div>Dummy text</div></div>

<div :class="{ invisible: !value2 }">Only my space is visible!</div> 将 类应用于该元素，因为 是 （我知道这里的否定词很让人困惑！）。invisible value2 false

请注意，你也可以通过使用opacity: 0 来隐藏该元素，甚至可以使用position: absolute; left: -9999px 将该元素偏移到视口之外。只要创建适当的CSS类，然后用:class 来切换它。

4.v-if vs. v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

5.总结

Vue给了你一堆好方法来隐藏屏幕上的元素。

当使用v-if="false" ，该元素在DOM中根本就没有被渲染。

当使用v-show="false" ，该元素在DOM中被渲染，然而，Vue应用了内联样式display: none ，完全隐藏了该元素。

另外，如果你想要更多的可见性定制，不要忘记强大的:class 绑定。

要隐藏元素但保持其空间，使用:class="{ invisible: !value }" 来指定invisible 类（该类有visibility: hidden 样式应用于它）。