Loop the V-for instruction.

The V-for directive requires special syntax in the form of Site in Sites, where sites is an array of source data and site is an alias for the iteration of array elements.

V-for can render a list by binding data to an array:

V – for instructions

<div id="app">
 <ol>
<li v-for="site in sites"> {{ site.name }} </li>
 </ol>
 </div>
 <script> new Vue({ el: '#app'.data: { sites: [{name: 'Runoob' },
{ name: 'Google' }, { name: 'Taobao'}]}})</script>
Copy the code

Use v-for in templates:

v-for

<ul>
<template v-for="site in sites">
 <li>{{ site.name }}</li>
<li>--------------</li>
</template>
</ul>
Copy the code

V-for iterated objects

V-for can iterate through an object’s properties:

v-for


<div id="app">
 <ul> <li v-for="value in object"> {{ value }} </li>
</ul>
</div> <script> new Vue({ el: '#app'.data: {
object: { name: 'Code forest'.url: 'http://www.codeforest.cn/'.slogan:
'Assist artificial learning! '}}})</script>

Copy the code

You can also provide the second argument as the key name:

v-for

<div id="app">
 <ul>
 <li v-for="(value, key) in object">
{{ key }} : {{ value }} </li>
</ul>
</div>
Copy the code

The third parameter is the index:

v-for

<div id="app">
 <ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
 </ul>
 </div>
Copy the code

V-for iterates over integers

V-for can also loop through integers

v-for

<div id="app">
<ul>
 <li v-for="n in 10"> {{ n }} </li>
</ul>
</div>
Copy the code

That’s all for today. Have you paid your tuition? Come to consolidate your knowledge quickly!