vue2.0 conditional rendering

Conditional rendering instruction

1.v-if and v-else
2.v-show

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue conditional rendering </title>
        <link rel="stylesheet" href="indexCss.css">
    </head>
    <body>
        <div id="root">
            <h2>Welcome to{{name}}</h2>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="indexJS.js"></script>
</html>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili'
        }
    }
})

Conditional rendering using v-show

To switch between hide and display:
Hide:

<h2 v-show="false">Welcome to{{name}}</h2>

Display:

<h2 v-show="true">Welcome to{{name}}</h2>

If you don't want to write here, you can write:

<h2 v-show="a">Welcome to{{name}}</h2>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili',
            a: false
        }
    }
})

Conditional rendering using v-if

<h2 v-if="false">Welcome to{{name}}</h2>

The discovery is gone, and the structure is gone

If you learn these two, you can do a simple interaction

<h2>Current n Value is:{{n}}</h2>
<button @click="n++">Point me n+1</button>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili',
            a: false,
            n: 0
        }
    }
})

The requirement is: display a div when n === 1;
Display a div when n === 2;
Show a div when n === 3.

Write with v-show:

<div v-show="n === 1">Food area</div>
<div v-show="n === 2">Animation area</div>
<div v-show="n === 3">Learning Area</div>

Once the data in this data changes, the whole template will be re parsed and re parsed to < div v-show = "n = = = 1" > food area < / div > the condition is valid, and the following div will still be judged

Write in v-if:

<div v-if="n === 1">Food area</div>
<div v-if="n === 2">Animation area</div>
<div v-if="n === 3">Learning Area</div>

If you judge that there is a high switching frequency, it is recommended to use v-show, because v-show is only dynamically hidden, and the node is in the node. You can only dynamically control the hiding and display through display:none

If there is v-if, there is v-else-if

V-else and v-else-if

<div v-if="n === 1">Food area</div>
<div v-else-if="n === 2">Animation area</div>
<div v-else-if="n === 3">Learning Area</div>

If < div V if = "n = = = 1" > food area < / div > is established, the next two lines of code will not be read

How do you know

<div v-if="n === 1">Food area</div>
<div v-else-if="n === 1">Animation area</div>

See if the animation area appears. Even if the < div V else if = "n = = = 1" > Animation area < / div > is established, I won't go to see it

There is also an instruction v-else

<div v-else>Living area</div>

Make v-if, v-else and v-else judgments without interruption

<div v-if="n === 1">
    <h2>Food area</h2>
    <h2>Animation area</h2>
    <h2>Learning Area</h2>
</div>

Use of template and v-if

In order not to affect the structure, you can write this

<template v-if="n === 1">
    <h2>Food area</h2>
    <h2>Animation area</h2>
    <h2>Learning Area</h2>
</template>

The biggest feature of template is that it does not affect the structure

When you write on the surface, the template packages these h2;
When the final page is rendered, it will drag the contents of < template V-IF = "n = = = 1" > away

However, template can only cooperate with v-if, not v-show

summary

conditional rendering

1.v-if

Writing method:

(1).v-if = "expression"

(2).v-else-if = "expression"

(3).v-else

Use and: switch scenes with low frequency

Features: DOM elements that are not displayed are removed directly.

Note: v-if can be used with: v-else-if and v-else, but the structure must not be "broken"

2.v-show

Writing method: v-show = "expression"

Applicable to: scenes with high switching frequency

Features: DOM elements that are not displayed are not removed, but are only hidden with styles

3. Remarks

When using v-if, elements may not be available, but they can be obtained by using v-show

Posted by todd2006 on Sat, 04 Dec 2021 17:37:15 -0800

Programmer Group