vue结合Axios+v-for列表循环实现网易健康页面(实例代码)

需求说明：

  • 完成网易健康页面的基本布局。
  • 在生命周期函数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 :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>

到此这篇关于vue结合Axios+v-for列表循环实现网易健康页面的文章就介绍到这了,更多相关vue网易健康页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目中axios的封装请求

    目录 一.简介 二.封装后 1.封装步骤 2.封装目标 3.使用新的axios封装API 4.使用封装后的axios 一.简介 axios 是一个轻量的HTTP客户端,它基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大大宣布取消对vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分 Vue 开发者的首选.( 如果你还不熟悉 axios,可以在这里

  • Vue列表循环从指定下标开始的多种解决方案

    最近遇到一个问题,在循环商品列表时,因为数组的第一个是商品的品牌介绍,所以循环时不能直接循环,只能从第二个元素开始. 方案1:从数据源头更改,后端直接在列表里去除第一个数组元素.但前端还是需要在别的地方展示品牌信息,故不好去除.(至于为何品牌信息需要和商品混合在一起,原因是业务问题.以前是给APP上展示的.) 方案2:循环时,列表切割 方案3:利用v-if,因为它的优先级低于v-for 方案4:利用method,返回新数组,其实也是切割和第二种类似 方案5:利用computed ps:下面看下v

  • vue3实战教程之axios的封装和环境变量

    目录 axios 基本使用 配置 封装 请求时添加loading 环境变量 总结 axios axios: ajax i/o system. 一个可以同时在浏览器和node环境进行网络请求的第三方库 功能特点: 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 等等 基本使用 get请求 // 导入的axios是一个实例对象 import axios from 'axios' // a

  • vue结合Axios+v-for列表循环实现网易健康页面(实例代码)

    vue结合Axios+v-for列表循环实现网易健康页面(实例代码)

    需求说明: 完成网易健康页面的基本布局. 在生命周期函数created()中使用Axios请求“网易健康”数据,数据为本地模拟的数据,详见health.json文件. health.json文件: 链接: https://pan.baidu.com/s/1ofnvp0ncQikVloSmcgueOA?pwd=dhrg 提取码: dhrg 遍历渲染显示“网易健康”接口数据到页面中,页面效果如图. 实现过程: 在项目下安装axios: npm i axios 将health.json文件放到stat

  • vue使用混入定义全局变量、函数、筛选器的实例代码

    说一种没人发的,利用混入mixins来实现全局变量和函数.mixins里面的方法.变量.筛选器会和组件里面的方法.变量.筛选器合并.这种方法优点是ide会有方法.变量.筛选器提示. 一.main.js文件 import Vue from 'vue' import App from './App' import router from './router' import store from './store' import mixin from './utils/mixin' Vue.proto

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • vue实现仿淘宝结账页面实例代码

    vue实现仿淘宝结账页面实例代码

    虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的.下面小编给大家分享vue实现仿淘宝结账页面实例代码,具体内容大家参考下本文. 这个demo,是小编基于之前的 vue2.0在table中实现全选和反选 文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图:(如果大家发现有什么问题请及时提出帮小颖改正错误呦,谢谢啦嘻嘻) 效果图: 更新后的home.vue <template> <div class="

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • vue组件表单数据回显验证及提交的实例代码

    最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用vue组件的方式实现. 代码如下: <template> <div class="index"> <!--header-bar></header-bar--> <div style="margin:20px;"> <div class="item"> <p>住户名称:</p>

  • PHP foreach循环使用详解与实例代码

    foreach基本语法如下: FOREACH ($array_variable as $value) { [code to execute] } or FOREACH ($array_variable as $key => $value) { [code to execute] } 在这两种情况下,多次[代码执行]将被处死是等于在$ array_variable数组元素的个数. 让我们来看一个例子.假设我们有下面的代码段: 复制代码 代码如下: $array1 = array(1,2,3,4,5

  • 从vue基础开始创建一个简单的增删改查的实例代码(推荐)

    1.安装vue-cli    cnpm install vue-cli -g  --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目的目录结构及说明 build是webpack配置 build.js       // 生产环境构建代码 check-versions.js // 检查node&npm等版本 utils.js          // 构建配置公用工具 vue-loader.conf.js // vue加载器

随机推荐