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

MySQL 5.5.27 installation graphic tutorial

1. Installation of MYSQL 1. Open the downloaded M...

MYSQL METADATA LOCK (MDL LOCK) theory and lock type test

Table of contents MYSQL METADATA LOCK (MDL LOCK) ...

MYSQL transaction tutorial Yii2.0 merchant withdrawal function

Preface I am a PHP programmer who started out as ...

The most commonly used HTML escape sequence

In HTML, <, >, &, etc. have special mean...

JavaScript implements simple date effects

The specific code of JavaScript date effects is f...

Mysql 5.7.18 Using MySQL proxies_priv to implement similar user group management

Use MySQL proxies_priv (simulated role) to implem...

Vue implements zip file download

This article example shares the specific code of ...

Detailed explanation of CSS pre-compiled languages ​​and their differences

1. What is As a markup language, CSS has a relati...

Solution to the problem of mysql master-slave switch canal

After configuring VIP, the error message that app...

Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet

Description Solution VMware 15 virtual machine br...

Introduction to the use of the four major sql ranking functions ROW_NUMBER, RANK, DENSE_RANK, NTILE

1. ROW_NUMBER() Definition: The ROW_NUMBER() func...

Graphical analysis of MYSQL5.7 configuration file location in Windows environment

1. MYSQL installation directory Copy the code as ...

MySQL 8.0.18 installation and configuration graphic tutorial

Learning objectives: Learn to use Windows system ...

How to install Postgres 12 + pgadmin in local Docker (support Apple M1)

Table of contents introduce Support Intel CPU Sup...

Solution for Tomcat to place configuration files externally

question When we are developing normally, if we w...