How to traverse objects with v-for in vue

The v-for directive in Vue that traverses objects is implemented through the v-for="item in object" syntax. It allows traversing object properties and rendering template content. The specific usage is as follows: specify the traversed variable name item in v-for, which represents each value in the object. Access the properties of an object using person[item], where item is the property name. The v-for directive only iterates over the enumerable properties of an object, not the enumerable properties.

v-for to traverse objects in Vue

In Vue, you can traverse objects through the v-for instruction and render the template content.

Syntax

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

Example

Suppose there is an object person:

<code class="javascript">const person = {
  name: 'John',
  age: 30
};</code>

To traverse the person object and render the name and age attributes, you can use the following template:

<code class="html"><template v-for="item in person">
  <p>属性名：{{ item }}</p>
  <p>属性值：{{ person[item] }}</p>
</template></code>

Rendering results:

<code class="html"><p>属性名：name</p>
<p>属性值：John</p>
<p>属性名：age</p>
<p>属性值：30</p></code>

Note

• v-for directive item can be any variable name, which will represent each value in the object.
• To access the properties of an object, you can use person[item], where item is the property name.
• v-for directive can only traverse the enumerable properties of the object, but not the non-enumerable properties.

The above is the detailed content of How to traverse objects with v-for in vue. For more information, please follow other related articles on the PHP Chinese website!