温馨提示×

Vue中如何动态渲染json数组

小樊
256
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