2.9. Vue.js loop statement

Recycle use v-for instructions.

v-for instructions need to be specified with site in sites special grammar of form sites is a source data array and site is an alias for the iteration of array elements.

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

2.9.1. `v-for` example ¶

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}
Vue.createApp(app).mount('#app')
</script>

v-for an optional second parameter is also supported, whose value is theindex of the current item:

2.9.2. `v-for` example ¶

index is the index value of the list item:

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}
Vue.createApp(app).mount('#app')
</script>

Template <template> for use in v-for :

2.9.3. `v-for` ¶

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

`v-for` iterative object ¶

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

2.9.4. `v-for` ¶

<divid="app"><ul><liv-for="value in object">{{ value
}}</li></ul></div><script>const app = { data() { return { object: {
name: 'Rookie Tutorial', url: 'http://www.runoob.com', slogan:
'Learning is not only about technology, but also about dreams！' } } } }
Vue.createApp(app).mount('#app')</script>

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

2.9.5. `v-for` ¶

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

The third parameter is the index:

2.9.6. `v-for` ¶

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

`v-for` iterative integer ¶

v-for can also loop integers.

2.9.7. `v-for` ¶

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

Show filtered / sorted results ¶

We can process the elements of the array and then display them, and we can generally return the filtered or sorted array by creating a calculated attribute.

2.9.8. `v-for` example ¶

Even numbers in the output array:

<divid="app"><ul><liv-for="n in evenNumbers">{{ n }}</li></ul></div>

`v-for/v-if` joint use ¶

The above examples are used together. v-for/v-if give select to set the default value:

2.9.9. `v-for/v-if` example ¶

v-for loop out the list v-if set the selection value:

<divid="app"><select@change="changeVal($event)"v-model="selOption"><templatev-for="(site,index)
in sites":site="site":index="index":key="site.id"><!--Set Index is 1 as the default value, with index values starting from 0--><optionv-if="index ==
1":value="site.name"selected>{{site.name}}</option><optionv-else:value="site.name">{{site.name}}</option></template></select><div>You have selected:{{selOption}}</div></div><script>const
app = { data() { return { selOption: "Runoob", sites: [
{id:1,name:"Google"}, {id:2,name:"Runoob"}, {id:3,name:"Taobao"}, ] } },
methods:{ changeVal:function(event){ this.selOption =
event.target.value; alert("You have selected"+this.selOption); } } }
Vue.createApp(app).mount('#app')</script>

Use on components `v-for` ¶

If you don’t already know the contents of the component, you can skip this section first.

On custom components, you can use them as you would on any ordinary element v-for :

<my-component v-for="item in items" :key="item.id"></my-component>

However, no data is automatically passed to the component because the component has its own independent scope. To pass iterative data to the component, we will use the props :

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

Do not automatically set item the reason for injecting it into a component is that it makes the component and v-for the operation is closely coupled. Identifying the source of component data enables componentsto be reused in other situations.

Here is a simple to-do a complete example of the list:

2.9.10. Example ¶

<divid="todo-list-example"><formv-on:submit.prevent="addNewTodo"><labelfor="new-todo">Add
a todo</label><inputv-model="newTodoText"id="new-todo"placeholder="E.g.
Feed the cat"/><button>Add</button></form><ul><todo-itemv-for="(todo,
index) in
todos":key="todo.id":title="todo.title"@remove="todos.splice(index,
1)"></todo-item></ul></div>

2.9. Vue.js loop statement

2.9.1. v-for example ¶

2.9.2. v-for example ¶

2.9.3. v-for ¶

v-for iterative object ¶

2.9.4. v-for ¶

2.9.5. v-for ¶

2.9.6. v-for ¶

v-for iterative integer ¶

2.9.7. v-for ¶