vue获取json数组中的值
时间: 2023-12-10 10:37:56 浏览: 33
你可以使用 `v-for` 指令循环遍历 JSON 数组,然后使用 `{{ }}` 插值表达式或者 `v-bind` 指令绑定属性来获取其中的值。
例如,假设你有以下 JSON 数组:
```json
[
{ "id": 1, "name": "Apple" },
{ "id": 2, "name": "Banana" },
{ "id": 3, "name": "Orange" }
]
```
你可以使用以下代码来循环遍历该数组,并获取其中的值:
```html
<template>
<div>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ fruit.id }} - {{ fruit.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Orange" }
]
};
}
};
</script>
```
在上面的代码中,我们使用 `v-for` 指令循环遍历 `fruits` 数组,并将每个元素赋值给 `fruit` 变量。然后,我们使用插值表达式 `{{ }}` 来显示 `fruit` 对象中的 `id` 和 `name` 属性的值。
注意,我们还为每个循环项目设置了一个唯一的 `key` 属性,这样 Vue 才能正确地跟踪每个项目的状态和更新它们。