Detailed explanation of Vue's list rendering

Detailed explanation of Vue's list rendering

1. v-for: traverse array contents (commonly used)

in can also be replaced by of

<body>
	<div id="div1">
		<li v-for='(p,i) in persons' :key=i>
			{{p.name}}--{{p.age}}
			<!-- Zhang--18
				 Lee--19
				 Liu--17 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:
				{id:'001',name:"张",age:18},
				{id:'002',name:"李",age:19},
				{id:'002',name:"Liu",age:17},
			]
		}
	})
</script>

2. v-for: traverse object properties (commonly used)

<body>
	<div id="div1">
		<li v-for='(p,k) in persons' :key=k>
			{{p}}--{{i}}
			<!-- Zhang--name
				 18--age -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:
				name:"张",
				age:18
			}
		}
	})

3. Traversing a string (uncommon)

<body>
	<div id="div1">
		<li v-for='(p,i) in str' :key=i>
			{{p}}--{{i}}
			<!-- a--0 
				 b--1
				 c--2
				 d--3
				 e--4 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTps=false
 	new Vue({
		el:"#div1",
		data:{
			str:"abcde"
		}
	})
</script>

4. Traverse a specified number of times (not commonly used)

<body>
	<div id="div1">
		<li v-for='(p,i) in 5' :key=i>
			{{p}}--{{i}}
			<!-- 1--0
				 2--1
				 3--2
				 4--3
				 5--4 -->
		</li>
	</div>
</body>

5. The function and principle of key

The index is used as the key above, but errors will occur when modifying the DOM in a disruptive order or when there is input content. Index can be used as a key only when it is used to render a page without modifying the page.

It is strongly recommended to use the unique identifier of the data, such as ID, mobile phone number, email address as the key

1. The role of key in virtual DOM:

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. Then Vue will compare the difference between the new virtual DOM and the old virtual DOM. The comparison rules are as follows:

2. Comparison rules:

(1) The same key as the new virtual DOM is found in the old virtual DOM:

①. If the content in the virtual DOM has not changed, use the previous real DOM directly!

②. If the content in the virtual DOM changes, a new real DOM is generated, and then the previous real DOM in the page is replaced.

(2) 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. Problems that may arise when using index as key:

1. If the data is added or deleted in reverse order, which destroys the order:

Unnecessary real DOM updates will be generated ==> The interface effect is fine, but the efficiency is low.

2. If the structure also contains DOM of input class:

Will produce wrong DOM update ==> There is something wrong with the interface.

4. How to choose key during development?

1. It is best to use the unique identifier of each piece of data as the key, such as ID, mobile phone number, ID number, student number and other unique values.

2. If there is no order-destroying operation such as adding or deleting data in reverse order, and the list is only rendered for display, there is no problem using index as the key.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

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
  • v-for directive in vue completes list rendering
  • Detailed explanation of rendering, sorting and filtering of Vue lists
  • Vue conditional rendering and list rendering

<<:  How to use CSS style to vertically center the font in the table

>>:  How to build a MySQL high-availability and high-performance cluster

Recommend

How to generate Vue user interface by dragging and dropping

Table of contents Preface 1. Technical Principle ...

HTML tag full name and function introduction

Alphabetical DTD: Indicates in which XHTML 1.0 DT...

Detailed explanation of MySQL using profile to analyze slow SQL (group left join is more efficient than subquery)

Use profile to analyze slow SQL The main purpose ...

Detailed explanation of using Docker to build a development environment for Laravel and Vue projects

This article introduces the development environme...

Detailed explanation of the use of Vue image drag and drop zoom component

The specific usage of the Vue image drag and drop...

Introduction to Linux File Compression and Packaging

1. Introduction to compression and packaging Comm...

Essential knowledge for web development interviews and written tests (must read)

The difference between inline elements and block-...

In-depth analysis of the role of HTML <!--...--> comment tags

When we check the source code of many websites, w...

A brief introduction to mysql mycat middleware

1. What is mycat A completely open source large d...

WeChat Mini Program QR Code Generation Tool weapp-qrcode Detailed Explanation

WeChat Mini Program - QR Code Generator Download:...

A "classic" pitfall of MySQL UPDATE statement

Table of contents 1. Problematic SQL statements S...

A brief discussion on Linux virtual memory

Table of contents origin Virtual Memory Paging an...

Deepin20.1 system installs MySQL8.0.23 (super detailed MySQL8 installation tutorial)

Download MySQL-8.0.23 Click to download: mysql-8....

Let's talk in detail about how the NodeJS process exits

Table of contents Preface Active withdrawal Excep...

A brief discussion on the understanding of TypeScript index signatures

Table of contents 1. What is an index signature? ...