loop statement

Recycle the v-for directive.

The v-for directive requires a special syntax in the form site in sites, sites are source data arrays and site is an alias for array element iterations.

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

v-for directive

<div id=" app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> New vue({ El: '#app', Data: { Sites: [ { name: 'welookups' }, { name: 'Google' }, { name: 'Javacodegeeks.net' } ] } }) </script>

Use v-for in the template:


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

v-for Iterative object

v-for can iterate data through the properties of an object:


<div id=" app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { Name: 'Rookie tutorial', Url: 'http://www.welookups.com', Slogan: 'Learning is not only technology, but also a dream! ' } } }) </script>

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


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

The third parameter is the index:


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

v-for iterative integer

V-for can also loop integers


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

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.