Detailed explanation of Vue.js conditional rendering

This article mainly shares with you the detailed explanation of Vue.js conditional rendering. In string templates, such as Handlebars, we have to write a conditional block like this:

<!-- Handlebars 模板 -->{{#if ok}}
    <h1>Yes</h1>{{/if}}

In In Vue, we use the v-if directive to achieve the same function:

<h1 v-if="ok">Yes</h1>

You can also use v-else to add an "else block":

<h1 v-if="ok">Yes</h1>
No

# Use v-if conditional rendering grouping on <template> elements

becausev-if is a directive, so it must be added to an element. But what if you want to switch multiple elements? At this time, you can treat a <template> element as an invisible wrapping element, and use v-if on it. The final rendering result will not contain <template> elements.

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

var vm = new Vue({
    el: '#example',    data: {
        ok: true
    }
})

#v-else and v-else-if

can be used v-else directive to represent an "else block" of v-if:

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

v-else The element must immediately follow the v-if or v-else-if after the element, otherwise it will not be recognized.

Similar to v-else, v-else-if must also be followed immediately by v-if or v- after the element of else-if.

v-show

Another option for showing elements based on conditions is the v-show directive.

<h1 v-show="ok">Hello!</h1>

The difference is that elements with v-show will always be rendered and remain in the DOM. v-show Simply toggle the element's CSS property display.

Note that v-show does not support the <template> element, nor does it support v-else.

v-if vs v-show

v-if is "real" conditional rendering, as it ensures that within the conditional block during the switch The event listeners and subcomponents are destroyed and recreated appropriately.

v-if is also lazy: if the condition is false on initial rendering, nothing is done - rendering of the condition will not begin until the first time the condition becomes true piece.

In contrast, v-show is much simpler - the element will always be rendered regardless of the initial conditions, and is simply toggled based on CSS.

Generally speaking, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, if you need to switch very frequently, it is better to use v-show; if the conditions rarely change at runtime, it is better to use v-if.

v-if

In string templates, such as Handlebars, we have to write a conditional block like this:

<!-- Handlebars 模板 -->{{#if ok}}
    <h1>Yes</h1>{{/if}}

In Vue, we use v The -if directive implements the same function:

<h1 v-if="ok">Yes</h1>

You can also use v-else to add an "else block":

<h1 v-if="ok">Yes</h1>
No

# in <template> Use v-if conditional rendering grouping on elements

Because v-if is a directive, it must be It is added to an element. But what if you want to switch multiple elements? At this time, you can treat a <template> element as an invisible wrapping element, and use v-if on it. The final rendering result will not contain <template> elements.

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

var vm = new Vue({
    el: '#example',    data: {
        ok: true
    }
})

#v-else and v-else-if

can be used v-else directive to represent an "else block" of v-if:

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

v-else The element must immediately follow the v-if or v-else-if after the element, otherwise it will not be recognized.

Similar to v-else, v-else-if must also be followed immediately by v-if or v- after the element of else-if.

v-show

Another option for showing elements based on conditions is the v-show directive.

<h1 v-show="ok">Hello!</h1>

The difference is that elements with v-show will always be rendered and remain in the DOM. v-show Simply toggle the element's CSS property display.

Note that v-show does not support the <template> element, nor does it support v-else.

v-if vs v-show

v-if is "real" conditional rendering, as it ensures that within the conditional block during the switch The event listeners and subcomponents are destroyed and recreated appropriately.

v-if is also lazy: if the condition is false on initial rendering, nothing is done - rendering of the condition will not begin until the first time the condition becomes true piece.

In contrast, v-show is much simpler - the element will always be rendered regardless of the initial conditions, and is simply toggled based on CSS.

In general, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, if you need to switch very frequently, it is better to use v-show; if the conditions rarely change at runtime, it is better to use v-if.

Related recommendations:

Vue.js—Conditional Rendering

The above is the detailed content of Detailed explanation of Vue.js conditional rendering. For more information, please follow other related articles on the PHP Chinese website!