Vue.js Loop Statements

In Vue, loop statements are mainly implemented through the v-for directive, used to iterate over arrays or objects, generating a corresponding number of elements.

Use the v-for directive on an element to render elements in a loop based on the source data array or object.

Iterating over an array:

v-for="(item, index) in items"

Iterating over an object:

v-for="(value, key, index) in object"

  • The role of keyUsing :v-forWhen rendering a list, you must provide a uniquekeyattribute, so that Vue can recognize the uniqueness of each item and perform efficient DOM updates.

  • Nested loops: Multiple can be nestedv-forto render multi-dimensional arrays or object structures.

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: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Try it yourself »

v-for also supports an optional second parameter, whose value is the index 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: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Try it yourself »

Using v-for in the <template> element:

v-for

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

Try it yourself »

v-for Iterating Over Objects

v-for can iterate over data through an object's properties:

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script>const app = { data() { return { object: { name: 'Rookie Tutorial', url: 'http://www.example.com', slogan: 'What you learn is not only technology, but also dreams!' } } } } Vue.createApp(app).mount('#app')</script>

Try it yourself »

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

v-for

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

Try it yourself »

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>

Try it yourself »

v-for Iterating Over Integers

v-for can also loop over integers

v-for

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

Try it yourself »

Displaying Filtered/Sorted Results

We can process the elements of an array before displaying them. Generally, we can create a computed property to return the filtered or sorted array.

v-for Example

Output the even numbers in the array:

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

Try it yourself »

Using v-for/v-if Together

The above example uses v-for/v-if together to set a default value for the select:

v-for/v-if Example

v-for loops out the list, v-if sets the selected value:

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

Try it yourself »

Using v-for on Components

If you haven't learned about components yet, you can skip this section.

On custom components, you can use v-for just like on any normal element:

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

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

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

The reason for not automatically injecting item into the component is that it would tightly couple the component to the operation of v-for. Making the source of component data explicit allows the component to be reused in other situations.

Below is a complete example of a simple todo list:

Example

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

Try it yourself »
Other Extensions