[JavaScript知识库]vue结合Axios+v-for列表循环实现网易健康页面

需求说明：

• 完成网易健康页面的基本布局。
• 在生命周期函数created()中使用Axios请求“网易健康”数据，数据为本地模拟的数据，详见health.json文件。

health.json文件：

链接：https://pan.baidu.com/s/1_f3rKXSEse7QoJ_FZtfGuA
提取码：2jf5

• 遍历渲染显示“网易健康”接口数据到页面中，页面效果如图。

实现过程：

• 在项目下安装axios：

npm i axios

• 将health.json文件放到static文件夹下。
• 在main.js中引入axios，并将axios挂载到vue原型。

import axios from 'axios'
// 只能把axios挂载到vue的原型上
Vue.prototype.$axios = axios;

• 在HelloWorld.vue中使用axios调用本地模拟的health.json数据。HelloWorld.vue代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul class="img">
      <li v-for="(item,index) in newsList" :key="index"><img :src=item.image /></li>
      <!-- <li><img src="@/assets/jk.jpg"/></li>
      <li><img src="../assets/jk.jpg"/></li>
      <li><img src="../assets/jk.jpg"/></li> -->
    </ul>
    <ul class="txt">
      <li v-for="(item,index) in newsList" :key="index">{{item.title}}</li>
      <!-- <li>夏季如何调养呼吸道疾病？</li>
      <li>夏季如何调养呼吸道疾病？</li>
      <li>夏季如何调养呼吸道疾病？</li> -->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '网易健康',
      newsList:[]
    }
  },
  mounted() {
    // 调用后台接口获得数据
    this.$axios.get(
        "../../static/health.json"
      )
      .then(res => {
        // then()中如果只传入一个处理函数，那么默认是处理请求成功的情况
        // 打印后台获得的结果
        // console.log(res.data);
        this.newsList = res.data.slice(0,4);//只获取json数组数据的前4条数据
      })
      .catch(err => {
        // 未获得成功之后的报错信息
        console.log(err);
      });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
  margin:0;
  padding:0;
}
.hello{
  width: 1000px;
}
h1{
  font-weight: normal;
  font-size: 18px;
  width:980px;
  padding-left: 15px;
  height: 35px;
  line-height: 35px;
  background:#FFE4B5;
  margin-bottom: 20px;
}
.img li{
  float: left;
  margin-right: 10px;
  list-style: none;
}
.img img{
  width: 240px;
}
.txt li{
  float: left;
  width: 240px;
  margin-right: 10px;
  font-size: 14px;
  /* background: forestgreen; */
  text-align: center;
  list-style: none;
}
</style>