前往新版Gitcode，体验更适合开发者的 AI 搜索 >>
# 7.条件渲染第1部分（v-if，v-else，v-else-if） > 原文： [https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/](https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/) 我们并不总是希望将所有内容呈现到我们的网页上。 根据特定条件或特定表达式的值，我们可能希望隐藏/显示/附加或分离元素。 这只不过是条件渲染– *基于条件*渲染元素。 这可以使用简单的`if-else`语句来实现。 但是，我们将如何使用Vue？ 现在就纠正一下吧！ Vue **指令**再来一次！ 在这方面，我们有`v-if`，`v-else`和`v-else-if`来帮助我们。 让我们逐一查看示例，以进行深入了解。 我将撒很多视觉效果以简化此过程。 首先，让我们有两个带有一些文本的段落标签，  <noscript><img alt="" class="alignnone size-full wp-image-14079" height="507" sizes="(max-width: 599px) 100vw, 599px" src="img/14aaafae94bb48d942bd3f553d948bfd.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_Without-directives-1.jpg 599w, https://javabeginnerstutorial.com/wp-content/uploads/2018/11/1_Without-directives-1-300x254.jpg 300w" width="599"/><h2><strong> 1\. v-if指令</strong></h2><p>使用<code>v-if</code>指令的语法如下：</p><pre><code class="language-html"><HTML-tag v-if=”condition or expression that evaluates to true or false”></code></pre><p>如果条件为真/评估为真，则将渲染标签。</p><p>让我们向Vue实例的数据对象添加<code>display</code>属性，并为其赋予<code>false</code>值。</p><pre><code class="language-javascript">data: { message: "Hi", display: false } </code></pre><p>现在，将<code>v-if</code>指令添加到第一段标签中，并指定<code>display</code>条件，基于该条件，将不显示标签。</p><pre><code class="language-html"><p v-if="display">Display evaluates to true</p></code></pre><p>由于<code>display</code>的值现在设置为<code>false</code>，因此不会呈现带有文本“ <strong>显示评估为真</strong>”的第一个<code><p></code>标签。</p><p><img alt="v-if false condition" class="alignnone size-full wp-image-14081" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/3_v-if-false.jpg" height="507" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20666%20507'%3E%3C/svg%3E" width="666"/></p><noscript><img alt="v-if false condition" class="alignnone size-full wp-image-14081" height="507" src="img/683e241dceed1bc821e64308c0558eb1.png" width="666"/><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>将<code>display</code>值更改为<code>true</code>将呈现第一个<code><p></code>标签的内容。</p><p><img alt="conditional rendering v-if" class="alignnone size-full wp-image-14080" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/2_v-if-true.jpg" height="508" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20670%20508'%3E%3C/svg%3E" width="670"/></p><noscript><img alt="conditional rendering v-if" class="alignnone size-full wp-image-14080" height="508" src="img/b81014dd6939b1699e77e2dc0eef84b9.png" width="670"/><h2><strong> 2\. v-else指令</strong></h2><p>假设您要在显示为<code>true</code>时显示第一个<code><p></code>标签，并在显示结果为<code>false</code>时显示第二个<code><p></code>标签。 在这种情况下，我们可以使用<code>v-else</code>指令。 它类似于<code>else</code>块。</p><pre><code class="language-html"><p v-if="display">Display evaluates to true</p> <p v-else>You always get to see me :)</p></code></pre><p>将<code>display</code>设为<code>true</code>时，将在<code>v-if</code>指令的条件评估为<code>true</code>的情况下呈现第一个<code><p></code>标签。</p><p><img alt="v-else true" class="alignnone size-full wp-image-14082" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/4_v-else-true-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20653%20501'%3E%3C/svg%3E" width="653"/></p><noscript><img alt="v-else true" class="alignnone size-full wp-image-14082" height="501" src="img/7d0940f1b5db61e3875cb2e2263d9f58.png" width="653"/><p>将<code>display</code>更改为<code>false</code>只会使用<code>v-else</code>伪指令呈现第二个<code><p></code>标签，如下所示，</p><p><img alt="v-else false condition" class="alignnone size-full wp-image-14083" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/5_v-else-false-1.jpg" height="502" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20663%20502'%3E%3C/svg%3E" width="663"/></p><noscript><img alt="v-else false condition" class="alignnone size-full wp-image-14083" height="502" src="img/0f65cbd6fe9e24b6e96377776a4ac52f.png" width="663"/><p><strong> <em>即时贴：</em> </strong> <em>具有<code>v-else</code>指令的HTML元素必须紧随具有<code>v-if</code>的元素。 否则，<code>v-else</code>元素将不会被识别。 换句话说，不要在<code>v-if</code>元素和<code>v-else</code>元素之间添加任何元素。 </em></p><p>可以在<code><div></code>，<code><template></code>等帮助下将这些指令添加到单个HTML元素或元素块中。考虑一种情况，您希望根据条件显示错误消息。 在这种情况下<code>if-else</code>块会派上用场。</p><h2><strong> 3\. v-else-if指令</strong></h2><p>它也与<code>v-if</code>元素一起使用。 该指令充当“ <strong> else-if </strong>”条件。 与其他任何编程语言一样，它可以链接多次。</p><p>让我们向数据对象添加<code>val</code>属性，并为其提供数值。</p><pre><code class="language-javascript">data: { message: "Hi", val: 5 }</code></pre><p>将<code>v-if</code>，<code>v-else-if</code>和<code>v-else</code>伪指令添加到三个<code><p></code>标签并添加条件。</p><pre><code class="language-html"><p v-if="val < 10">Val is less than 10</p> <p v-else-if="val > 10 && val < 20">val is between 10 and 20</p> <p v-else>Pretty high val!!</p></code></pre><p>现在，让我们更改<code>val</code>属性的值，并查看输出如何变化。</p><p>首先，将<code>val</code>设为<code>5</code>。 由于它小于10，因此<code>v-if</code>条件评估为<code>true</code>并被渲染。</p><p><img alt="v-else-if first expression" class="alignnone size-full wp-image-14084" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/6_v-else-if-first-1.jpg" height="504" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20728%20504'%3E%3C/svg%3E" width="728"/></p><noscript><img alt="v-else-if first expression" class="alignnone size-full wp-image-14084" height="504" src="img/cb9ed33f1627c5ef3a74aed8e5c6292f.png" width="728"/><p>现在将<code>val</code>更改为<code>15</code>。 <code>v-else-if</code>条件评估为<code>true</code>，并将其呈现到DOM，如下所示。</p><p><img alt="v-else-if second expression" class="alignnone size-full wp-image-14085" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/7_v-else-if-second-1.jpg" height="502" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20771%20502'%3E%3C/svg%3E" width="771"/></p><noscript><img alt="v-else-if second expression" class="alignnone size-full wp-image-14085" height="502" src="img/29869b7f60d5b9f9d87511893e889e6b.png" width="771"/><p>将<code>val</code>更改为<code>90</code>会使<code>v-if</code>和<code>v-else-if</code>表达式均求值为<code>false</code>。 因此，将渲染<code>v-else</code>元素。</p><p><img alt="v-else-if third condtion" class="alignnone size-full wp-image-14086" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/11/8_v-else-if-third-1.jpg" height="501" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20731%20501'%3E%3C/svg%3E" width="731"/></p><noscript><img alt="v-else-if third condtion" class="alignnone size-full wp-image-14086" height="501" src="img/ba1ad56b6d8ad18480db60329a7bb779.png" width="731"/><p><strong> <em>即时贴：</em> </strong> <em>与v-else相似，带有v-else-if指令的元素必须紧随带有v-if或v-else-if的元素。 否则，将无法识别。 </em></p><p>上面讨论的所有代码都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub存储库</a>中找到。</p><p>是时候戴上开发人员的帽子，并尝试使用这些指令了！ 祝你今天愉快。</p><p> </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/8-conditional-rendering-part-2/" title="8\. Conditional rendering Part 2 (v-if and v-show)"> 8.条件渲染第2部分（v-if和v-show）</a></h5></div></div> </body> </html></noscript>
