Vue.js—Conditional rendering

This article shares with you about Vue.js-conditional rendering. Friends in need can take a look at the content of this article

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 the v-if instruction 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 d477f9ce7bf77f53fbcf36bec1b69b7a 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 d477f9ce7bf77f53fbcf36bec1b69b7a element as an invisible wrapping element, and use v-if on it. The final rendering result will not contain d477f9ce7bf77f53fbcf36bec1b69b7a 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 d477f9ce7bf77f53fbcf36bec1b69b7a 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 d477f9ce7bf77f53fbcf36bec1b69b7a 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 d477f9ce7bf77f53fbcf36bec1b69b7a element as an invisible wrapping element, and use v-if on it. The final rendering result will not contain d477f9ce7bf77f53fbcf36bec1b69b7a 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 d477f9ce7bf77f53fbcf36bec1b69b7a 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+layer table data binding and update

Vue.js vue tag attributes and Conditional rendering

Detailed explanation of conditional rendering in mini program development

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