18 use of v-if combined with template tag in V-for

v-for cyclic number

v-for can be used to cycle numbers. For example, if you want to cycle numbers 1-99, you can write them directly as follows.

<span v-for="count in 99">{{count}},</span>

In this way, you can quickly cycle out the value of 1-99 on the page. You can see this effect in the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
const app=Vue.createApp({ 
    data(){
        return{
        }
    },
    methods:{
    },
    template:`<span v-for="count in 12">{{count}}<br /></span>`
}) 
const vm=app.mount("#app")
</script>
</html>

How to use judgment in v-for

Take a look at the small example of array loop written in the last article. There are some changes in the new requirements. Because the company doesn't want to recruit junior front-end engineers, we want to get rid of it and only show intermediate and advanced. At this time, you are likely to write the code like this.

<ul>
    <li 
        v-for="(item,index) in listArray"
        :key="index+item"
        v-if="item != 'primary'"
    >
        [{{index}}]{{item}}
    </li>
</ul>

Preview in the browser and you will find that the primary loop item does not disappear.

Why?
Because the priority of v-for loop is higher than that of v-if judgment, the judgment is invalid.

The correct writing method should be to separate a label in the outer layer of < li > and cycle on < li >.
For example, write the following code.

template:`<ul>
            <div v-for="(item,index) in listArray" :key="index+item">
                <li v-if="item != 'primary'">
                    [{{index}}]{{item}}
                </li>
            </div>
        </ul>`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
const app=Vue.createApp({ 
    data(){
        return{
            listArray:['primary','intermediate','senior']
        }
    },
    methods:{
    },
    template:`<ul>
                <div v-for="(item,index) in listArray" :key="index+item">
                    <li v-if="item != 'primary'">
                        [{{index}}]{{item}}
                    </li>
                </div>
            </ul>`
}) 
const vm=app.mount("#app")
</script>
</html>

At this time, preview in the browser, and the primary item disappears as desired.

Use of template tag

Is the result perfect?
When you open the browser console and look at the Elements tab, you will find that there is a problem with the DOM structure. There are two items in the loop, but there are three < div >, and this outer layer applies the form of < li > in < div >, which does not conform to the basic structure of HTML syntax.


In order to solve this problem, Vue provides us with a < template > template tag, that is, an empty placeholder, to solve the phenomenon of useless html tags used in the template to complete business logic.

Now you can write the above code like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
const app=Vue.createApp({ 
    data(){
        return{
            listArray:['primary','intermediate','senior']
        }
    },
    methods:{
    },
    template:`<ul>
                <template v-for="(item,index) in listArray" :key="index+item">
                <li v-if="item != 'primary'">
                    [{{index}}]{{item}}
                </li>
                </template>
            </ul>`
}) 
const vm=app.mount("#app")
</script>
</html>


At this time, go to the browser to see the results, which is in line with our expectations.

<ul>
    <!--v-if-->
    <li>...</li>
    <li>...</li>
</ul>

I have basically finished the basic operation of list loop and some pits in vue3. I hope it will be helpful to you.

In order to facilitate your study, all codes in this article are attached:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
const app = Vue.createApp({
    data() { 
        return { 
            listArray: [
                'primary', 
                'intermediate', 
                'senior'
            ],
            listObject:{ 
                DogOne:'Black back', 
                DogTwo:'poodle', 
                DogThree:'Golden hair' 
            }
        } 
    },
    methods:{
        handleChangeBtnClick(){
            this.listArray.push('willem')
        },
    },
    template: `
        <ul>
            <template v-for="(item,index) in listArray" :key="index+item">
                    <li v-if="item != 'primary'">
                        [{{index}}]{{item}}
                    </li>
            </template>
        </ul>

        <button @click="handleChangeBtnClick">Point me to change</button>

        <ul>
            <li v-for="(value,key,index) in listObject" :key="key">
                [{{index}}]{{value}}-{{key}}
            </li>
        </ul>

        <span v-for="count in 99">{{count}},</span>
        `
})
const vm = app.mount("#app")
</script>
</html>

Tags: PHP Linux Laravel Vue

Posted on Wed, 01 Dec 2021 21:55:46 -0500 by afrim12