Vue foreach

Vue.js provides a built-in directive called v-for to iterate over an array or an object. It can be used in combination with the v-bind directive to bind data to HTML elements.

Here is how you can use v-for to iterate over an array of items:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

In this example, items is an array of items that you want to iterate over. The v-for directive creates a new element for each item in the array and binds the item's value to the {{ item }} placeholder in the template.

You can also use v-for to iterate over an object's properties:

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

In this example, object is an object with properties that you want to iterate over. The v-for directive creates a new element for each property in the object and binds the property's value to the {{ value }} placeholder in the template. The key variable is used to display the property name.

You can also use v-for to iterate over a range of numbers:

<div v-for="n in 10">{{ n }}</div>

In this example, the v-for directive creates a new element for each number from 1 to 10 and binds the number's value to the {{ n }} placeholder in the template