How to complete list rendering with v-for instruction in vue

This article will explain in detail how to complete the list rendering of the v-for command in vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. List traversal

The most basic use case 1:

List rendering {{index}}-{{name}} new Vue ({el:'#app', data () {return {names: ['Zhang San','Li Si', 'Wang Wu', 'Zhao Liu']}},})

In the above example: bind the names array in data through the v-for instruction, and traverse the elements in the array 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 traverse objects, strings, specify numbers, and so on. Such as:

List rendering {{key}}: {{propery}} {{char}} {{num}} new Vue ({el:'#app' Data () {return {student: {name:' Li Ming', age:23, address:' Dalian'}, str:'HelloWord'},})

The effect of the above code is as follows:

2. The role of key in Vue

Function:

Key is the identification of virtual dom objects. When the data changes, vue will generate [new virtual dom] based on [new data], and then Vue will compare the difference between [new virtual dom] and [old virtual dom].

Difference comparison rules:

First, find the same key in [old virtual dom] as [new virtual dom].

(1) if the content of the virtual dom remains unchanged, directly use the previous real dom

(2) if there is a content edge in the virtual dom, a new real dom is generated, and then the previous real dom in the page is replaced

If the same key is not found in [old virtual dom] and [new virtual dom], create a new real dom and then render it 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:

If we want to filter out the person named 'Zhang San' in the list: (it can be implemented with the attributes computer or watch)

List rendering {{name}} {{name}} 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 nemesis' Zhang San'})} Computed: {/ / if we want to filter out the person named 'Zhang San' showNames () {return this.names.filter ((n) = > {return nasty = "Zhang San"})},})

Effect:

This is the end of the article on "how to complete the list rendering of v-for instructions in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.