我的书签
添加书签
移除书签8 条件渲染第 2 部分（v-if和v-show）
原文： https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/
我们是否没有足够的指令来处理条件渲染？ 我们还需要v-show吗？ 还有另一件事困扰我们的大脑吗？
但是该怎么办？ 我们忙于观看 Netflix 时，Evan You（Vue 的创建者）出于某种原因添加了它。 因此，让我们看看为什么该指令首先存在。 警告：这篇文章是“条件渲染第 1 部分”的继续，因此，我建议您在继续进行之前先充分了解这些概念。
我们讨论了v-if，v-else等不仅可以应用于单个 HTML 元素，而且可以应用于使用<div>或<template>等的元素块。让我们首先来看一个带有<template>元素的示例，并了解它作为不可见包装器的行为，以最终结果呈现给 DOM。
使用元素让我们在<template>元素内包装标题和段落，并使用v-if指令为其指定条件。 除此之外，我们还要添加没有任何条件的另一段。
首先，将display属性添加到 Vue 实例的数据对象，并为其赋予true值。
data: {
display: true
}
其次，对index.html文件进行以下更改，
<template v-if="display">
<h1>Welcome</h1>
<p>Hi there!</p>
</template>
<p>How are you doing?</p>
如果由于display设置为true而看到了输出，则if条件求值为true，并显示模板块中的元素。
这里有趣的是，如果您打开浏览器的开发人员工具（在 Chrome 浏览器中为Ctrl + Shift + I或F12），然后在元素标签中，<template>元素将不包含。 它神奇地变成了不可见的！
注意： 当v-if条件的值为false时，整个元素将从 DOM 中分离/删除。 当在我们的应用中不需要某个元素时，这通常是首选的行为，因为 DOM 中包含较少的元素会提高其性能。
v-show指令
作为开发人员的生活是如此变幻莫测！ 我们经常遇到需要频繁显示和隐藏元素的情况，即在网页上打开和关闭。 在这种情况下，最好使用v-show指令。
使用v-show的原因
该指令将确保 DOM 中始终存在元素。 将显示条件是否为真（求值为true）。 当条件求值为false时，该元素将通过自动添加 CSS 属性display: none来隐藏！ 听起来不有趣吗？
这个概念可能很难缠住我们的头脑。 不用担心，我已经覆盖了你。 示例和屏幕截图可为我们提供帮助！
在前面的示例中，让我们将v-show指令添加到第二段标签中。
<p v-show="display">How are you doing?</p>
当display为true时，v-if和v-show的行为类似。 浏览器输出和开发人员工具显示的结果与以前相同（请参阅“使用template元素”标题下显示的两个图像）。 这里没有惊喜！
让我们将display属性的值更改为false。 我们完整的代码如下所示：
Index.js
var app = new Vue({
el: "#app",
data: {
display: false
}
});
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue!</title>
<!-- including Vue with development version CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="display">
<h1>Welcome</h1>
<p>Hi there!</p>
</template>
<p v-show="display">How are you doing?</p>
</div>
<!-- including index.js file -->
<script src="index.js"></script>
</body>
</html>
顺便说一句，让我们继续查看浏览器的输出和开发人员工具的结果。
不出所料，由于v-if和v-show条件都求值为false，因此没有任何内容呈现给网页。 这里也没有什么魔术。 但是，当我们打开开发人员工具并仔细查看“元素”窗格时，有很多东西需要解码。
- 具有
v-if伪指令的<template>元素（包含<h1>和<p>元素）在求值为false时，已从 DOM 中删除了。 - 仅具有
v-show指令的第二个<p>元素使用 CSS display属性切换元素的可见性。 元素始终附加到 DOM，并且始终显示。 它只是变得不可见。 就这样！
当心！
由于不支持将v-show与<template>元素一起使用，因此无法使用。 另外，它不适用于v-else（if和else是灵魂伴侣，你知道吗？！不是，show和else！）
那么，我应该使用v-if或v-show吗？
好问题！ 如果您想切换，通常将经常切换，因为 DOM 中始终存在该元素，请使用v-show，无论初始条件是否为true或false。 借助 CSS display属性只能切换可见性。 因此，初始渲染成本较高。
如果元素的状态不经常更改/切换**，尤其是在运行时，请使用v-if。 因为在这里附加和分离元素通常会变得昂贵。 另外，请记住，v-if是惰性的，即，如果条件在初次渲染时求值为false，则直到条件变为true时，元素或块才会被渲染。
还在头上有雾吗？ 不用担心！ 练习是这里的关键。 抓住巫师的帽子和魔杖，尝试一些咒语（示例场景），您将掌握它！ 顺便说一下，以上讨论的所有代码都可以在 GitHub 仓库中找到。
祝您有美好的一天！
<template>元素内包装标题和段落，并使用v-if指令为其指定条件。 除此之外，我们还要添加没有任何条件的另一段。display属性添加到 Vue 实例的数据对象，并为其赋予true值。data: {
display: true
}
index.html文件进行以下更改， <template v-if="display">
<h1>Welcome</h1>
<p>Hi there!</p>
</template>
<p>How are you doing?</p>
display设置为true而看到了输出，则if条件求值为true，并显示模板块中的元素。
Ctrl + Shift + I或F12），然后在元素标签中，<template>元素将不包含。 它神奇地变成了不可见的！
v-if条件的值为false时，整个元素将从 DOM 中分离/删除。 当在我们的应用中不需要某个元素时，这通常是首选的行为，因为 DOM 中包含较少的元素会提高其性能。v-show指令。true）。 当条件求值为false时，该元素将通过自动添加 CSS 属性display: none来隐藏！ 听起来不有趣吗？v-show指令添加到第二段标签中。<p v-show="display">How are you doing?</p>
display为true时，v-if和v-show的行为类似。 浏览器输出和开发人员工具显示的结果与以前相同（请参阅“使用template元素”标题下显示的两个图像）。 这里没有惊喜！display属性的值更改为false。 我们完整的代码如下所示：var app = new Vue({
el: "#app",
data: {
display: false
}
});
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue!</title>
<!-- including Vue with development version CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="display">
<h1>Welcome</h1>
<p>Hi there!</p>
</template>
<p v-show="display">How are you doing?</p>
</div>
<!-- including index.js file -->
<script src="index.js"></script>
</body>
</html>
v-if和v-show条件都求值为false，因此没有任何内容呈现给网页。 这里也没有什么魔术。 但是，当我们打开开发人员工具并仔细查看“元素”窗格时，有很多东西需要解码。v-if伪指令的<template>元素（包含<h1>和<p>元素）在求值为false时，已从 DOM 中删除了。v-show指令的第二个<p>元素使用 CSS display属性切换元素的可见性。 元素始终附加到 DOM，并且始终显示。 它只是变得不可见。 就这样！v-show与<template>元素一起使用，因此无法使用。 另外，它不适用于v-else（if和else是灵魂伴侣，你知道吗？！不是，show和else！）v-show，无论初始条件是否为true或false。 借助 CSS display属性只能切换可见性。 因此，初始渲染成本较高。v-if。 因为在这里附加和分离元素通常会变得昂贵。 另外，请记住，v-if是惰性的，即，如果条件在初次渲染时求值为false，则直到条件变为true时，元素或块才会被渲染。
