How to traverse arrays of vue arrays

Iterate through arrays in Vue

In Vue.js, you can use v-for directive to traverse the array. This directive allows you to render a specific template for each element in the array.

grammar:

 <code class="html"><template v-for="item in items"> <!-- 模板内容--> </template></code>

parameter:

<li> item : the current element in the array <li> items : The array to traverse

Example:

 <code class="html"><template> <ul> <li v-for="item in items">{{ item }}</li> </ul> </template> <script> import { ref } from &#39;vue&#39;; export default { setup() { const items = ref([&#39;Apple&#39;, &#39;Banana&#39;, &#39;Orange&#39;]); return { items, }; }, }; </script></code>

In this example, v-for directive is used to iterate over the items array and render a <li> element for each array element.

Other features:

<li> v-for.of : Specifies the array or iterable object to traverse. <li> v-for.in : Specifies the attribute or key of the object to traverse. <li> v-for.index : Gets the index of the array currently traversed. <li> v-for.key : Specifies a unique key for each element to optimize list rendering.

More examples:

<li> Iterate over the object array:

 <code class="html"><template v-for="item in items"> <h1 id="item-name">{{ item.name }}</h1> <p>{{ item.age }}</p> </template></code>

<li> Use v-for.index:

 <code class="html"><template v-for="(item, index) in items"> <p>{{ index 1 }}. {{ item }}</p> </template></code>

The above is the detailed content of How to traverse arrays of vue arrays. For more information, please follow other related articles on the PHP Chinese website!