vue结合Axios+v-for列表循环实现网易健康页面(实例代码)
短信预约 -IT技能 免费直播动态提醒
需求说明：
- 完成网易健康页面的基本布局。
- 在生命周期函数created()中使用Axios请求“网易健康”数据，数据为本地模拟的数据，详见health.json文件。
health.json文件：
链接: https://pan.baidu.com/s/1ofnvp0ncQikVloSmcgueOA?pwd=dhrg
提取码: dhrg
- 遍历渲染显示“网易健康”接口数据到页面中，页面效果如图。
实现过程：
在项目下安装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 :class="lazy" data-src=item.image /></li>
<!-- <li><img class="lazy" data-src="@/assets/jk.jpg"/></li>
<li><img class="lazy" data-src="../assets/jk.jpg"/></li>
<li><img class="lazy" data-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;
text-align: center;
list-style: none;
}
</style>到此这篇关于vue结合Axios+v-for列表循环实现网易健康页面的文章就介绍到这了,更多相关vue网易健康页面内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
