v-for directive in vue completes list rendering

v-for directive in vue completes list rendering

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:
  • In-depth understanding of Vue's conditional rendering and list rendering
  • A brief analysis of conditional rendering instructions in Vue.js
  • Vue conditional rendering v-if and v-show
  • Vue Basic Tutorial: Conditional Rendering and List Rendering
  • Detailed explanation of Vue's list rendering
  • Detailed explanation of rendering, sorting and filtering of Vue lists
  • Vue conditional rendering and list rendering

<<:  How to build a DHCP server in Linux

>>:  Mobile front-end adaptation solution (summary)

Recommend

WeChat applet implements login interface

The login interface of WeChat applet is implement...

CSS setting div background image implementation code

Adding background image control to a component re...

Solve the problem that document.getElementBy series methods cannot obtain objects

getElementById cannot get the object There is a s...

5 things to note when writing React components using hooks

Table of contents 01. Use useState when render is...

Linux uses suid vim.basic file to achieve privilege escalation

Reproduce on Kali First set suid permissions for ...

How to implement draggable components in Vue

This article shares with you how to implement dra...

Docker's four network types principle examples

Four network types: None: Do not configure any ne...

Problems and solutions for MYSQL5.7.17 connection failure under MAC

The problem that MYSQL5.7.17 cannot connect under...

Basic knowledge of website design: newbies please read this

Now many people are joining the ranks of website ...

Ubuntu 18.04 one-click upgrade of all third-party Python packages and installation of Python packages

1. What is pip pip is a Python package management...

Detailed explanation of HTML programming tags and document structure

The purpose of using HTML to mark up content is t...

How to configure the maximum number of files that can be opened by each Nginx process

1. Check the maximum number of open files in the ...

Example of CSS3 to achieve div sliding in and out from bottom to top

1. First, you need to use the target selector of ...

Share 8 CSS tools to improve web design

When one needs to edit or modify the website desi...

vue-cli configuration uses Vuex's full process record

Table of contents Preface Installation and Usage ...