vue如何加载本地json数据

加载本地的JSON数据通常有两种方法：

方法一：通过ajax方式

1.首先，在Vue.js工程的目录下建立一个data目录，将要加载的 JSON 文件复制到这个目录下。

2.在组件中，使用ajax工具去请求这个文件，并在回调函数中将请求到的数据赋值给组件的数据变量。我们可以在组件的生命周期的某个时刻（如created）中调用这个ajax请求。

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        items: []
      };
    },
    created() {
      axios.get('./data/items.json')
        .then((result) => {
          this.items = result.data;
        });
    }
  };
</script>

上述代码中，我们通过axios工具去获取了在./data目录下的items.json文件中的数据，并在成功后将数据赋值给items数组，然后渲染到页面中。

方法二：直接使用ajax请求，不利用axios

1.首先，在Vue.js工程的目录下建立一个data目录，将要加载的 JSON 文件复制到这个目录下。

2.在组件中，直接发送ajax请求获取本地JSON数据。

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        items: []
      };
    },
    created() {
      let xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = () => {
        if (xmlhttp.readyState === XMLHttpRequest.DONE) {
          if (xmlhttp.status === 200) {
            this.items = JSON.parse(xmlhttp.responseText);
          } else {
            console.log('Error: ' + xmlhttp.statusText);
          }
        }
      };

      xmlhttp.open("GET", "./data/items.json", true);
      xmlhttp.send();
    }
  };
</script>

上述代码中，我们直接使用原生XMLHttpRequest对象发送请求，在回调函数中获取本地JSON数据，并将其赋值给item数组，供后续的渲染使用。

两种方法都可以成功的加载本地JSON数据。具体应该选择哪种方法，应视开发需求或者团队约定而定。