The code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/npm/vue"></script>
<title>vueUsed inv-for</title>
</head>
<body>
<div >
<h3>Loop list</h3>
<table>
<thead>
<tr>
<th>Serial number</th>
<th>Book title</th>
<th>author</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books" :key="">
<td>{{index+1}}</td>
<td>{{}}</td>
<td>{{}}</td>
</tr>
</tbody>
</table>
</div>
<div >
<h3>Loop object</h3>
<div v-for="(value,key) in person">
{{key}}:{{value}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
books: [{
title: 'Water Margin',
author: 'Shi Nai',
},
{
title: 'Romance of the Three Kingdoms',
author: 'Luo Guanzhong',
},
{
title: 'Journey to the West',
author: 'Wu Chengen',
},
{
title: 'Dream of Red Mansions',
author: 'Cao Xueqin',
},
]
}
})
</script>
<script>
new Vue({
el: '#app2',
data: {
person: {
name: 'Xsan',
age: 26,
}
}
})
</script>
</body>
</html>
"(book,index) in books"It is a loop expression. The "(book, index)" in the formula cannot be changed. The second one is the index, and the index starts from 0, so when the sequence number is written below, it will be "+1" and the first one is always an object.
The cycle state is maintained. By default, if the order in the array changes, or the number changes to cause re-rendering, vue will reuse the previous elements without re-ordering. This may be desired in some cases, but most cases may not be what we want. At this time, you can add the key attribute. It can only be of type number and str. When looping, a unique value of the looped object is generally used. Do not use index to make the key. Although it is used, it has no effect. In vue2. Above, using v-for on custom components, key must be written.
Summarize
The above is a detailed explanation of the example code of vue using v-for loop introduced by the editor. I hope it will be helpful to everyone. Thank you very much for your support for my website!