API获取直播博主信息

介绍

实现类似freeCodeCamp上的Use the Twitchtv JSON API练习，项目中使用斗鱼的api接口代替了Twitchtv接口，由于没有找到合适的接口数据，项目中使用online人数超过1000000状态代替online，低于的代替offline状态，后期代码优化的时候会用合适的api接口或者mock生成模拟数据，样式较丑勿怪。

所有博主显示

online博主

offline博主

其他功能介绍

刷新button重新获取数据
搜索button实现按博主名获取相应博主信息
all，online，offline三个button分别获取全部博主，在线博主，离线博主信息

主要功能实现

获取数据

getDatas: function() {
   
      api.getData("http://capi.douyucdn.cn/api/v1/live?offset=0")
      .then(res=>{
   
        // console.log(res)
        console.log(res.data)
        this.allList=res.data
        this.allListFirst=res.data//获取数据后做一个缓存，初始数据
        let online=[]
        let offline=[]
        let onlineNum=[]
        for (let index = 0; index < res.data.length; index++) {
   
          onlineNum.push(res.data[index].online)
          if(res.data[index].online>=1000000){
   //假设online数超过1000000状态为online
            online.push(res.data[index])
          }else {
   //假设online数低于1000000状态为offline
            offline.push(res.data[index])
          }
        }
        this.onlineList=online
        this.onlineListFirst=online//获取数据后做一个缓存，初始数据
        this.offlineList=offline
        this.offlineListFirst=offline//获取数据后做一个缓存，初始数据
        console.log(onlineNum)
      })
      .catch(err=>{
   
        console.log(err)
      })
    }

博主信息

<div class="info">
        <div class="info-all" v-show="allShow">
          <div class="detial" v-for