v-for directive in vue completes list rendering

1. List traversal
2. The role of key in Vue
3. List filtering

This article briefly summarizes and demonstrates list rendering in Vue:

List rendering is done using v-for directive based on the options of binding a set of elements, and the rendering format can be customized.

1. List traversal

The most basic use case 1:

<!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>List Rendering</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="(name,index) in names">

                {{index}}-{{name}}

            </li>

        </ul>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                names:['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu']

            }

        },

    })

</script>

</html>

In the above example: through the v-for directive, the names array in data is bound, and the elements in the array are traversed in the form of a list, where name represents a traversal element of the current array, and index is the index of the current element name in the array. The output effect is as follows:

v-for can also iterate over objects, strings, specified numbers, and more. like:

<!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>List Rendering</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- Traverse the object-->

        <ul>

            <li v-for="(propery,key) in student">

                {{key}}:{{propery}}

            </li>

        </ul>

        <!-- Traverse the string-->

        <ol>

            <li v-for="char in str">{{char}}</li>

        </ol>

        <!-- Custom output -->

        <ul>

            <li v-for="num in 10">

                {{num}}

            </li>

        </ul>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                student:

                    name:'Li Ming',

                    age:23,

                    address:'Dalian'

                },

                str:'HelloWord'

            }

        },

    })

</script>

</html>

The effect of the above code is as follows:

2. The role of key in Vue

effect:

key is the identifier of the virtual dom object. When the data changes, vue will generate a new virtual DOM based on the new data, and then Vue will compare the differences between the new virtual DOM and the old virtual DOM.

Difference comparison rules:

First, find the same key as the new virtual dom in the old virtual dom
(1) If the content in the virtual dom has not changed, directly use the previous real dom
(2) If the content in the virtual dom is lost, a new real dom is generated, and then the previous real dom in the page is replaced.
If the same key as the new virtual dom is not found in the old virtual dom, a new real dom is created and then rendered to the page.

3. List filtering

List filtering is to filter the list elements before traversing the list, and select the elements that meet the requirements for display, such as:

Suppose we want to filter out people named 'Zhang San' in the list: (This can be achieved using the computer or watch attributes)

<!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>List Rendering</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- List Filter -->

        <!-- computer method -->

        <ul>

            <li v-for="(name,intdex) in showNames">{{name}}</li>

        </ul>

        <!-- watch method -->

        <ol>

            <li v-for="(name,index) in displayName">{{name}}</li>

        </ol>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                names:['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu'],

                displayName:[],

            }

        },

        watch:

            name:{

                immediate:true,

                handler(val){

                    this.displayName=this.names.filter((n)=>{

                        return n!='Zhang San'

                    })

                }

            }

        },

        computed: {

            // If we want to filter out people named 'Zhang San' showNames(){

                return this.names.filter((n)=>{

                    return n!="Zhang San"

                })

            }

        },        

    })

</script>

</html>

Effect:

This is the end of this article about how to use the v-for directive in vue to complete list rendering. For more information about the v-for directive in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: