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:
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:
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 :
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:
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:
v-for
<divid="app"><ul><liv-for="(value, key) in object">{{ key }} : {{ value
}}</li></ul></div>
The third parameter is the index:
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.
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.
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:
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:
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>