Vue の条件付きレンダリング命令の詳細な説明: v-if および v-show

Vue では、v-if と v-show を使用して要素またはテンプレートのレンダリングを制御できます。 v-if と v-show も Vue で一般的に使用される内部命令です。ここで説明する命令は directive であり、プレフィックス v- が付いた特別なコマンドを指します。命令の値はバインディング式に限定されます。命令の責任は次のとおりです。変更時に DOM に特別な動作を適用します。 2 つの命令

v-if と v-show は、誰もが 条件付きレンダリング命令 ## とよく呼ぶものです。 ＃。 (学習ビデオ共有: vue ビデオ チュートリアル)

v-if : 条件分岐命令

---

まず見てみましょう

v-if ディレクティブ。その機能は、式 true または false の値に基づいて DOM 内の要素 (または複数の要素) を生成または削除することです。これは、JavaScript の if の条件判断に似ています。 Vue には、v-if に加えて、v-else-if と v-else もあります。

v-if

前述の通り

v-if式の値に従って決定DOM 内に要素を生成するかどうか。例:

<!-- template -->
<div id="app">
    <h1 v-if="true">v-if的值为true时，显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})

この時点で、

<h1> 要素が div#app 要素に挿入され、次のように表示されます:

Vue で、要素がレンダリングされるかどうかを判断する必要がある場合は、要素に

v-if ディレクティブを追加し、その値を true# に設定します。 ## または false。たとえば、上の例では true を設定し、要素がレンダリングされます。上記の true 値を false に変更すると、<h1> 要素は表示されません。

v-if

に true または false を直接設定するほか、式で判定することもできます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!-- template --&gt; &lt;div id=&quot;app&quot;&gt;     &lt;h1 v-if=&quot;isShow&quot;&gt;     v-if的值为true时，显示这个div元素     &lt;/h1&gt; &lt;/div&gt; // JavaScript     var app = new Vue({     el: '#app',     data: { isShow: true } })</pre><div class="contentsignin">ログイン後にコピー</div></div>上記の例では、

isShow

の値が true として宣言され、h1 要素で次のように宣言されています。 v-if ディレクティブ バインディング isShow を渡します。実際、これは v-if="true" に似ています。 h1 要素も通常どおりレンダリングされます。

isShow

を false に設定すると、 h1 要素はレンダリングされません。

上では 1 つの要素をレンダリングしていますが、複数の要素をレンダリングしたい場合は、内部に複数の要素を直接入れ子にする必要がありますか?私たちの考えを検証してみましょう:

<!-- template -->
<div id="app">
    <div v-if="isShow">
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
</div>

は想像どおりです。ただし、Vue では、複数の要素を切り替える場合、通常はこの方法ではなく、パッケージ化要素として

<template>

要素を使用し、v-if# を使用します。 ## その上で。最終的なレンダリング結果には、<template> 要素は含まれません。次のように:

<template v-if="isShow">
    <h1>标题</h1>
    <p>段落 1</p>
    <p>段落 2</p>
</template>

##v-else

v-else と JavaScript の

else

も似ていますが、v-if と組み合わせて使用​​する必要があります。たとえば、ログインすると、ログインしている場合はウェルカム メッセージが表示され、ログインしていない場合はログインするように求められます。次に、次のような isLogined 式を設定します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!-- Template --&gt; &lt;div id=&quot;app&quot;&gt;     &lt;h1 v-if=&quot;isLogined&quot;&gt;欢迎来到W3cplus！(^_^)&lt;/h1&gt;     &lt;h1 v-else&gt;请先登录，再来！(^_^)&lt;/h1&gt; &lt;/div&gt; // JavaScript var app = new Vue({     el: '#app',     data: {         isLogined: true     } })</pre><div class="contentsignin">ログイン後にコピー</div></div> ご想像のとおり、ブラウザで次の図の効果が確認できます。

isLogined の値を

false

に置き換えると、レンダリングされるコンテンツが変更されます:

実際にはプロジェクトでは、コンポーネントが 2 つの状態で異なるレンダリングを行う場合、

v-if と

v-else

を <template&gt ; とともに使用します。実装は非常に簡単です。たとえば、勝った場合と勝てなかった場合: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;template v-if=&amp;#39;isPrized&amp;#39;&gt;     &lt;figure&gt;         &lt;figcaption&gt;恭喜你中了5元红包&lt;/figcaption&gt;         &lt;img src=&quot;xxx&quot; /&gt;     &lt;/figure&gt; &lt;/template&gt; &lt;template v-else&gt;     &lt;figure&gt;         &lt;figcaption&gt;亲，就差那么一点点&lt;/figcaption&gt;         &lt;img src=&quot;xxx&quot; /&gt;     &lt;/figure&gt; &lt;/template&gt;&lt;/code&gt;&lt;code&gt;v-else-if&lt;/code&gt;&lt;/p&gt; &lt;h3 id=&quot;v-else-if-strong-および-strong-else-if-JavaScript&quot;&gt;##v-else-if&lt;strong&gt; および &lt;/strong&gt;else if JavaScript &lt;/h3&gt; も同様で、&lt;p&gt;v-if&lt;code&gt; と一緒に使用する必要があります。複数の条件が同時に存在する場合は、演算結果に基づいて表示するかどうかを決定します。次のコードに示すように、表示されるブロックは &lt;/code&gt;type&lt;code&gt; の値に基づいて決定されます。たとえば、この例では、&lt;/code&gt;type&lt;code&gt; の値が &lt;/code&gt;B&lt;code&gt; に設定されている場合、ブロック &lt;/code&gt;B&lt;code&gt; が表示されます。変更 &lt;/code&gt; type&lt;code&gt; の値は、別の領域を表示します: &lt;/code&gt;&lt;code&gt;&lt;/code&gt;&lt;/p&gt; &lt;h2 id=&quot;strong-v-show-strong&quot;&gt;&lt;strong&gt;v-show&lt;/strong&gt;&lt;/h2&gt; &lt;hr&gt; &lt;p&gt;文章开头提到过，除了&lt;code&gt;v-if&lt;/code&gt;之外，Vue还提供&lt;code&gt;v-show&lt;/code&gt;也可以控制元素的渲染。&lt;code&gt;v-show&lt;/code&gt;和&lt;code&gt;v-if&lt;/code&gt;功能有点相似，其中&lt;code&gt;v-if&lt;/code&gt;依赖于控制DOM节点，而&lt;code&gt;v-show&lt;/code&gt;是依赖于控制DOM节点的&lt;code&gt;display&lt;/code&gt;属性。当&lt;code&gt;v-show&lt;/code&gt;传入的值为&lt;code&gt;true&lt;/code&gt;时，对应DOM元素的&lt;code&gt;display&lt;/code&gt;的值为&lt;code&gt;block&lt;/code&gt;之类的，反之为&lt;code&gt;false&lt;/code&gt;时，&lt;code&gt;display&lt;/code&gt;的值为&lt;code&gt;none&lt;/code&gt;。也就是用户看不到元素的显示，但其DOM元素还是存在的。&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;!-- Template --&gt; &lt;div id=&quot;app&quot;&gt;     &lt;h1 v-show=&quot;true&quot;&gt;我是一个标题&lt;/h1&gt;     &lt;p v-show=&quot;isShow&quot;&gt;我是一个段落&lt;/p&gt; &lt;/div&gt; // JavaScript var app = new Vue({     el: '#app',     data: {         isShow: false     } })</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>在浏览器看到的效果将是这样的：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/e6b42caa8a650f011c2e1d8dc21e96aa-8.png" class="lazy" alt=""></p> <blockquote><p><strong>注意</strong>，<code>v-show 不支持 <template> 语法，也不支持 v-else。

v-if Vs. v-show

---

v-if和v-show都能控制DOM元素的显示和隐藏，但是在切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

两者之间的具体区别，官网是这样描述的：

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

总结

---

这篇文章主要了解了Vue中的v-if和v-show。这两个都是Vue的内部指令，而且都是用来控制元素的渲染。只不过，v-if判断是否加载，可以减轻服务器的压力，在需要时加载;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染，但实际使用的时候，更应该根据自己的场景来判断使用哪一个指令。

原文地址：:https://www.w3cplus.com/vue/v-if-vs-v-show.html

（学习视频分享：web前端开发、编程基础视频）

以上がVue の条件付きレンダリング命令の詳細な説明: v-if および v-showの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。