赞
踩
隐藏和显示网页上的元素是一项经常发生的与用户界面有关的任务。你可能想切换一些细节部分、工具提示等的可见性。
v-if
。display: none
,由v-show
。:class
绑定应用visibility: hidden
。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中插入或不插入该元素。非常简单。
当v-if
指令与false
,Vue也不会初始化元素上的事件监听器,即使你明确使用事件指令。
v-if
与 (在下一节介绍)相比,toggling的成本相对较高(因为每次你改变 的值,元素就会从DOM中插入/移出,同时事件监听器也会被初始化/取消初始化)。但如果元素最初是隐藏的,它的初始化成本很低。v-show
v-if
你可以在那些不经常切换可见性并且最初是隐藏的元素上使用v-if
。例如,显示/隐藏一个有实体详细信息的部分。
挑战:如果用0
,v-if
会呈现这个元素吗?那么'0'
呢?
通常情况下,保持元素在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中实现一个按钮来切换一个元素的显示?请在评论中分享你的解决方案!
v-show
,当与false
,应用display: none
内联样式,并在视觉上隐藏元素,几乎不对DOM进行修改。
因此,使用v-show
来切换元素的可见性是相对便宜的(与上面描述的v-if
相比),所以你可以对一个经常切换可见性的元素使用这个指令。
如果你需要隐藏元素的内容,同时保留它所占据的空间呢?隐藏元素内容但保留其空间的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
来切换它。
v-if
vs. v-show
v-if
是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。
v-if
也是惰性的:如果在初次渲染时条件值为 false,则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下,v-show
简单许多,元素无论初始条件如何,始终会被渲染,只有 CSS display
属性会被切换。
总的来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show
较好;如果在运行时绑定条件很少改变,则 v-if
会更合适。
Vue给了你一堆好方法来隐藏屏幕上的元素。
当使用v-if="false"
,该元素在DOM中根本就没有被渲染。
当使用v-show="false"
,该元素在DOM中被渲染,然而,Vue应用了内联样式display: none
,完全隐藏了该元素。
另外,如果你想要更多的可见性定制,不要忘记强大的:class
绑定。
要隐藏元素但保持其空间,使用:class="{ invisible: !value }"
来指定invisible
类(该类有visibility: hidden
样式应用于它)。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。