This article will introduce to you how to loop an array and render a list of items in vuejs
. I hope it will be helpful to friends in need!
##v-for
Directives
Vuejs Provides us with a
v-for directive for rendering a list of items into the
dom.
v-for
Syntax of the directive
v-for="user in users"
- {{user.name}}
v-for instruction to loop through the
users array, so that in each loop the
user variable points to a different object that appears in the array.
key
Attribute
v-for directive, we need to add a
key attribute to the element because
vuejs needs to track the list item based on the provided
key.
- {{user.name}}
users array, the id attribute is unique to each object, so we pass it to the
key attribute.
- {{user.name}} {{index}}
Iterating over objects
We can also loop overJavaScript objects by using the
v-for directive.
- {{key}} : {{ value }}
value first, and then the
key.
The above is the detailed content of Use of v-for list rendering instructions in Vue.js (code example). For more information, please follow other related articles on the PHP Chinese website!