152.md

# 8.条件渲染第 2 部分（v-if 和 v-show）

> 原文： [https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/](https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/)

我们是否没有足够的指令来处理条件渲染？ 我们还需要`v-show`吗？ 还有另一件事困扰我们的大脑吗？

但是该怎么办？ 我们忙于观看 Netflix 时，Evan You（Vue 的创建者）出于某种原因添加了它。 因此，让我们看看为什么该指令首先存在。 *警告*：这篇文章是“[条件渲染第 1 部分](https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/)”的继续，因此，我建议您在继续进行之前先充分了解这些概念。

我们讨论了`v-if`，`v-else`等不仅可以应用于单个 HTML 元素，而且可以应用于使用`<div>`或`<template>`等的元素块。让我们首先来看一个带有`<template>`元素的示例 并了解它作为*不可见包装器*的行为，以最终结果呈现给 DOM。

## 使用<模板>元素

让我们在`<template>`元素内包装标题和段落，并使用`v-if`指令为其指定条件。 除此之外，我们还要添加没有任何条件的另一段。

首先，将`display`属性添加到 Vue 实例的数据对象，并为其赋予`true`值。

```java
data: {
    display: true
  }
```

其次，对`index.html`文件进行以下更改，

```java
 <template v-if="display">
        <h1>Welcome</h1>
        <p>Hi there!</p>
      </template>
      <p>How are you doing?</p> 
```

如果由于`display`设置为`true`而看到了输出，则`if`条件评估为`true`，并显示模板块中的元素。

![v-if template block](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20520%20532'%3E%3C/svg%3E)

<noscript><img alt="v-if template block" class="alignnone size-full wp-image-14093" height="532" src="img/6e38ac6963bfa766ebb74bd9aa67b5ba.png" width="520"/><p>这里有趣的是，如果您打开浏览器的<strong>开发人员工具</strong>（在 Chrome 浏览器中为<em> Ctrl + Shift + I </em>或<em> F12 </em>），然后在 在[元素]标签中，[<code>&lt;template&gt;</code>]元素将不包含[]。 它神奇地变成了<strong>不可见的</strong>！</p><p><img alt="developer tools" class="alignnone size-full wp-image-14094" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/10_p2-template-devTools.jpg" height="433" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20329%20433'%3E%3C/svg%3E" width="329"/></p><noscript><img alt="developer tools" class="alignnone size-full wp-image-14094" height="433" src="img/65cdd8584fd0a814f07052ca3cac578b.png" width="329"/><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"></span><span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"><span class="ezoic-ad ezoic-adl" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"></span></span><p><strong> <em>注意：</em> </strong> <em>当<code>v-if</code>条件的值为<code>false</code>时，整个元素将从 DOM 中分离/删除。 当在我们的应用中不需要某个元素时，这通常是首选的行为，因为 DOM 中包含较少的元素会提高其性能。 </em></p><h2><strong> v-show 指令</strong></h2><p>作为开发人员的生活是如此变幻莫测！ 我们经常遇到需要频繁显示和隐藏元素的情况，即在网页上打开和关闭。 在这种情况下，最好使用<code>v-show</code>指令。</p><h3><strong>使用 v-show 的原因</strong></h3><p>该指令将确保 DOM 中始终存在<strong>元素。 将显示条件是否为真（评估为<code>true</code>）。 当条件评估为<code>false</code>时，该元素将通过自动添加 CSS 属性<code>display: none</code>来隐藏！ 听起来不有趣吗？</strong></p><p>这个概念可能很难缠住我们的头脑。 不用担心 我已经覆盖了你。 示例和屏幕截图可为我们提供帮助！</p><p>在前面的示例中，让我们将<code>v-show</code>指令添加到第二段标签中。</p><pre><code class="language-html">&lt;p v-show="display"&gt;How are you doing?&lt;/p&gt;</code></pre><p>当<code>display</code>为<code>true</code>时，<code>v-if</code>和<code>v-show</code>的行为类似。 浏览器输出和开发人员工具显示的结果与以前相同（请参阅“使用&lt;模板&gt;元素”标题下的“<strong>”下显示的两个图像）。 这里没有惊喜！</strong></p><p>让我们将<code>display</code>属性的值更改为<code>false</code>。 我们完整的代码如下所示：</p><h4><em> Index.js </em></h4><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { display: false } });</code></pre><h4><em> Index.html </em></h4><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;template v-if="display"&gt; &lt;h1&gt;Welcome&lt;/h1&gt; &lt;p&gt;Hi there!&lt;/p&gt; &lt;/template&gt; &lt;p v-show="display"&gt;How are you doing?&lt;/p&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>顺便说一句，让我们继续查看浏览器的输出和开发人员工具的结果。</p><p><img alt="v-show hidden" class="alignnone size-full wp-image-14092" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/13_p2-v-show-invisible-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20652%20501'%3E%3C/svg%3E" width="652"/></p><noscript><img alt="v-show hidden" class="alignnone size-full wp-image-14092" height="501" src="img/af8367091b132c8d43446a93f6ede57b.png" width="652"/><p>不出所料，由于<code>v-if</code>和<code>v-show</code>条件都评估为<code>false</code>，因此没有任何内容呈现给网页。 这里也没有什么魔术。 但是，当我们打开开发人员工具并仔细查看“<strong> Elements </strong>”窗格时，有很多东西需要解码。</p><ol><li>具有<strong> v-if </strong>伪指令的<code>&lt;template&gt;</code>元素（包含<code>&lt;h1&gt;</code>和<code>&lt;p&gt;</code>元素）在评估为<code>false</code>时，已从 DOM 中删除了<strong>。</strong></li><li>仅具有<strong> v-show </strong>指令的第二个<code>&lt;p&gt;</code>元素<strong>使用 CSS <code>display</code>属性切换元素的可见性</strong>。 元素始终附加到 DOM，并且始终显示<strong>。 它只是变得不可见。 就这样！</strong></li></ol><h3><strong>当心！ </strong></h3><p>由于不支持将<code>v-show</code>与<code>&lt;template&gt;</code>元素一起使用，因此无法使用。 另外，它不适用于<code>v-else</code>（<code>if</code>和<code>else</code>是灵魂伴侣，你知道吗？！不是，<code>show</code>和<code>else</code>！）</p><h3><strong>那么，我应该使用 v-if 或 v-show 吗？ </strong></h3><p>好问题！ 如果您想<strong>切换</strong>，通常将<strong>经常切换为</strong>，因为 DOM 中始终存在该元素，请使用<strong> v-show </strong>，无论初始条件是否为<code>true</code>或<code>false</code>。 借助 CSS <code>display</code>属性只能切换可见性。 因此，初始渲染成本较高。</p><p>如果<strong>的状态<strong>的状态不经常更改/切换</strong>，尤其是在运行时，请使用<strong> v-if </strong>。 因为在这里附加和分离元素通常会变得昂贵。 另外，请记住，<code>v-if</code>是<strong>懒惰的</strong>，即，如果条件在初次渲染时评估为<code>false</code>，则直到条件变为<code>true</code>时，元素或块才会被渲染。 第一次。</strong></p><p>还在头上有雾吗？ 不用担心！ 练习是这里的关键。 抓住巫师的帽子和魔杖，尝试一些咒语（示例场景），您将掌握它！ 顺便说一下，以上讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p>祝您有美好的一天！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/" title="9\. Rendering Lists Part 1 (Iterating over arrays)"> 9.渲染列表第 1 部分（遍历数组）</a></h5></div></div> </body> </html></noscript>