vue获取json数据并展示
时间: 2023-05-10 21:01:42 浏览: 131
Vue可以通过axios、fetch等方式获取json数据。以axios为例,首先需要在html文件中引入axios:
```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```
然后在Vue组件中使用axios获取数据:
```js
<script>
export default {
data() {
return {
items: [],
error: null
};
},
mounted() {
axios
.get("/path/to/data.json")
.then(response => (this.items = response.data))
.catch(error => (this.error = error));
}
};
</script>
```
其中,`/path/to/data.json`是json数据的路径。获取成功后,将数据存储在`items`中,以便在页面中展示。
展示数据的方法多种多样,可以通过v-for指令循环渲染数据到页面,也可以使用组件化的方式封装展示数据的组件等等。
以一个简单的列表展示为例,可以这样实现:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }} - {{ item.age }}
</li>
</ul>
<div v-if="error">{{ error }}</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
error: null
};
},
mounted() {
axios
.get("/path/to/data.json")
.then(response => (this.items = response.data))
.catch(error => (this.error = error));
}
};
</script>
```
其中,`{{ item.name }} - {{ item.age }}`展示了json数据中的`name`和`age`字段。如果获取数据失败,页面将显示错误信息。