vue中v-for怎麼遍歷對象

Vue 中遍歷物件的 v-for 指令透過 v-for="item in object" 語法實作。它允許遍歷物件屬性並渲染模板內容，具體用法如下：在 v-for 中指定遍歷的變數名稱 item，它代表物件中的每個值。使用 person[item] 存取物件的屬性，其中 item 是屬性名稱。 v-for 指令僅遍歷物件的可枚舉屬性，而非可列舉屬性。

Vue 中遍歷物件的v-for

在Vue 中，可以透過v-for 指令遍歷對象並渲染模板內容。

語法

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

範例

#假設有一個物件person：

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

要遍歷person 物件並渲染name 和age 屬性，可以使用以下模板：

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

渲染結果：

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

注意

######################################### #######v-for 指令中的###item### 可以是任意變數名，它將表示物件中的每個值。 ######要存取物件的屬性，可以使用 ###person[item]###，其中 ###item### 是屬性名稱。 ######v-for 指令只能遍歷物件的可枚舉屬性，不能遍歷非可枚舉屬性。 ######

以上是vue中v-for怎麼遍歷對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！