vue获取json文件数据

在Vue.js中，获取JSON文件数据通常通过`fetch`, `axios`, 或者`vue-resource`等库来实现。这里我会展示一种常见的使用`axios`库的方式：

首先，在你的项目中安装axios库（如果还没有安装）：

npm install axios

然后，在需要获取数据的地方，你可以创建一个组件，例如一个.vue文件：

<template>
  <div>
    <h1>JSON数据</h1>
    <ul v-for="item in data" :key="item.id">
      <li>{{ item.name }} - {{ item.value }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: []
    };
  },
  async mounted() {
    try {
      const response = await axios.get('path/to/your/json/file.json');
      this.data = response.data;
    } catch (error) {
      console.error('Error fetching JSON data:', error);
    }
  }
};
</script>

在这个例子中，当组件挂载后，会发送一个GET请求到指定的JSON文件路径，成功获取数据后将数据赋值给`data`数组，然后在模板中显示出来。