溫馨提示×

Vue中如何動態(tài)渲染json數(shù)組

小樊
151
2024-06-29 20:10:37
欄目: 編程語言

在Vue中，你可以使用v-for指令來動態(tài)渲染JSON數(shù)組。下面是一個示例：

假設(shè)你有一個JSON數(shù)組items，其中包含一些數(shù)據(jù)：

items: [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]

你可以在Vue模板中使用v-for指令來循環(huán)遍歷這個數(shù)組并動態(tài)渲染數(shù)據(jù)：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

在上面的代碼中，v-for="item in items"指令會循環(huán)遍歷items數(shù)組中的每個元素，并將當(dāng)前元素賦值給item變量。然后，我們使用{{ item.name }}來渲染每個元素的name屬性。

這樣就可以動態(tài)渲染JSON數(shù)組中的數(shù)據(jù)了。

0 踩