The role of v-for:
When we need to render a set of data, we can use v-for to do it
The four common usage methods of v-for are:
1. Use v-for to loop a simple array
2. Use v-for to loop a complex array
3. Use v-for to loop objects
4. v-for loop an iterated number
<div id="app">
<!--v-for循环一个简单的数组-->
<!--格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index-->
<p v-for="item in list">{
{item}}</p>
<P v-for="(item ,i) in list">索引值：{
{i}}---每一项：{
{item}}</P>
<!--v-for循环一个复杂的数组-->
<p v-for="(item,i) in list1">索引值：{
{i}}--id：{
{item.userid}}---姓名：{
{item.username}}</p>
<!--v-for循环一个对象-->
<!--参数说明：key和index为可选参数-->
<p v-for="(val,key,i) in list2">id：{
{val}},name:{
{key}},index:{
{i}}</p>
<!--v-for 循环一个迭代数字-->
<p v-for="count in 10">这是第{
{count}}次循环</p>v-for iterates through the array
格式：v-for="(item, index) in items"
Format description: index is an optional parameter. When it is not necessary to obtain the index value of each item, index can be omitted
<ul>
<li v-for="(item,index) in anime">{
{index+1}}-{
{item}}</li>
</ul>data: {
anime: ['三体', '狐妖小红娘', '天宝伏妖录'],v-for traverses objects
Format: v-for="(value, key, index) in info". (parameters are sorted by importance)
Parameter description: key and index are optional parameters
<ul>
<li v-for="(value,key) in info">{
{key}}:{
{value}}</li>
</ul>data: {
info: {
name: "super咖啡",
age: 21,
height: 1.68
}v-for iterates over numbers
格式：v-for="count in counts"
Note: If you use v-for to iterate numbers, the value of the previous count starts from 1
<p v-for="count in 10">这是第{
{count}}次循环</p>The key attribute of v-for
When we use v-for, it is recommended to add a key attribute to the corresponding element or component
Why add a key attribute? The main purpose is to efficiently update the virtual DOM
Suppose you want to insert a new node f between bc and bc in a node list abcde. Before adding the key attribute, the diff algorithm defaults to update c to f, d to c, e to d, and finally insert e
After adding the key attribute, the key makes an identification for each node, and the diff algorithm can accurately and efficiently insert new nodes at the required positions
The value assigned to the key must have a one-to-one correspondence with the element
<li v-for="(item,index) in anime" :key="item">{
{index+1}}-{
{item}}</li>When the data of the list changes, by default, vue will reuse the existing DOM elements as much as possible, thereby improving the performance of rendering. However, this default performance optimization strategy will cause the stateful list to not be updated correctly. In order to give vue a hint so that it can track the identity of each node, so as to improve the rendering performance under the premise of ensuring that the stateful list is updated correctly. At this point, you need to provide a unique key attribute for each item:
① The value of the key can only be a string or a number
② The value of the key must be unique (ie: the value of the key cannot be repeated)
③ It is recommended to use the value of the id attribute of the data item as the value of the key (because the value of the id attribute is unique)
④ It doesn't make any sense to use the value of index as the value of key (because the value of index is not unique)
⑤ It is recommended to specify the value of the key when using the v-for command (both to improve performance and prevent list state disorder)
Notes on the use of key in v-for:
When v-for loops, the key attribute can only use number to get string
The key can only use the form of v-bind attribute binding to specify the value of the key
When using v-for in a component, or when there is a problem with using v-for in some special cases, you must specify a unique character or number type while using v-for: key value