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

Getting Started Tutorial for Beginners: Domain Name Resolution and Binding

So after registering a domain name and purchasing...

vue element el-transfer adds drag function

The Core Asset Management Project requires el-tra...

Implementation example of react project from new creation to deployment

Start a new project This article mainly records t...

JavaScript uses promise to handle multiple repeated requests

1. Why write this article? You must have read a l...

First experience of creating text with javascript Three.js

Table of contents Effect Start creating text Firs...

Installation and configuration method of Zabbix Agent on Linux platform

Here is a brief summary of the installation and c...

IDEA graphic tutorial on configuring Tomcat server and publishing web projects

1. After creating the web project, you now need t...

Differences between Windows Server win2003, win2008R2, win2012, win2016, and win2019 system versions

Recently, Microsoft released the 2019 server syst...

Detailed explanation of encoding issues during MySQL command line operations

1. Check the MySQL database encoding mysql -u use...

Which one should I choose between MySQL unique index and normal index?

Imagine a scenario where, when designing a user t...

CSS to achieve floating customer service effect

<div class="sideBar"> <div>...

When to use table and when to use CSS (experience sharing)

The main text page of TW used to have a width of 8...

Each time Docker starts a container, the IP and hosts specified operations

Preface Every time you use Docker to start a Hado...

Implementation of docker-compose deployment project based on MySQL8

1. First, create the corresponding folder accordi...

Javascript destructuring assignment details

Table of contents 1. Array deconstruction 2. Obje...