vue結(jié)合Axios+v-for列表循環(huán)實現(xiàn)網(wǎng)易健康頁面(實例代碼)

更新時間：2022年03月09日 15:55:09 作者：wanglingli95

這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實現(xiàn)網(wǎng)易健康頁面,在項目下安裝axios，通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

需求說明：

完成網(wǎng)易健康頁面的基本布局。
在生命周期函數(shù)created()中使用Axios請求“網(wǎng)易健康”數(shù)據(jù)，數(shù)據(jù)為本地模擬的數(shù)據(jù)，詳見health.json文件。

health.json文件：

鏈接: https://pan.baidu.com/s/1ofnvp0ncQikVloSmcgueOA?pwd=dhrg
提取碼: dhrg

遍歷渲染顯示“網(wǎng)易健康”接口數(shù)據(jù)到頁面中，頁面效果如圖。

實現(xiàn)過程：

在項目下安裝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調(diào)用本地模擬的health.json數(shù)據(jù)。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>夏季如何調(diào)養(yǎng)呼吸道疾病？</li>
      <li>夏季如何調(diào)養(yǎng)呼吸道疾?。?lt;/li>
      <li>夏季如何調(diào)養(yǎng)呼吸道疾??？</li> -->
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '網(wǎng)易健康',
      newsList:[]
    }
  },
  mounted() {
    // 調(diào)用后臺接口獲得數(shù)據(jù)
    this.$axios.get(
        "../../static/health.json"
      )
      .then(res => {
        // then()中如果只傳入一個處理函數(shù)，那么默認是處理請求成功的情況
        // 打印后臺獲得的結(jié)果
        // console.log(res.data);
        this.newsList = res.data.slice(0,4);//只獲取json數(shù)組數(shù)據(jù)的前4條數(shù)據(jù)
      })
      .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>

到此這篇關(guān)于vue結(jié)合Axios+v-for列表循環(huán)實現(xiàn)網(wǎng)易健康頁面的文章就介紹到這了,更多相關(guān)vue網(wǎng)易健康頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: