溫馨提示×

Vue中如何動態渲染json數組

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

在Vue中,你可以使用v-for指令來動態渲染JSON數組。下面是一個示例:

假設你有一個JSON數組items,其中包含一些數據:

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

你可以在Vue模板中使用v-for指令來循環遍歷這個數組并動態渲染數據:

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

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

這樣就可以動態渲染JSON數組中的數據了。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女