vue通过axios调用在static文件内的json文件的数据

vue通过axios调用在static文件内的json文件的数据

在项目内的静态文件static内创建一个json文件

json文件内的内容如下

在vue文件内引入axios

完整代码如下

<template>
  <div>
    <div class="nav">
      <!-- vue通过使用axios调用json文件内的数据 -->
      <ul>
        <li v-for="(item,index) of menu" :key="index">{{item.info}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default{
    data(){
      return{
        menu:[]
      }
    },
    mounted() {
      this.getMeu()
    },
    methods:{
      getMeu(){
        axios.get('/static/Information.json').then(res => {
          // res是请求到的值
          this.menu = res.data;
          console.log(res.data)
        })
      },
    },
  }
</script>

<style>
  .nav ul{
    width: 500px;height: 390px;border: 1px solid #000000;list-style: none;margin: 0;padding: 0;
  }
  .nav ul li {height: 30px;background-color: #00FFFF;border-bottom: 1px solid #000000;}
</style>