vue请求开放接口的小demo

根据关键词搜索音乐，采用开放api ajax请求方式

第一步：新建vue文件

第二步：index.js 引入文件路径，路由访问路径

第三步OneDemo 代码：
<template>
  <div class="one">
    <input type="text" v-model="searchname"><button @click="search">搜索</button>
    <ul>
       <li v-for="(item,i) in shuzu"
          :key="i">
          <img :src=" item.pic">
          <a :href="item.url" target="_blank">{{item.title}}--{{item.author}}</a> 
      </li>
    </ul>
    <br>
    <br>
    <br>
    <br>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '1212121',
      shuzu:[],
      searchname:''
    }
  },
  mounted:function(){//默认加载 
  },
  methods:{
    skyapi:function(name){
      var that =this;
            this.axios.post('https://api.apiopen.top/searchMusic?name='+name).then(function (response) {
                console.log(response.data.result);
                for(let i=0;i<(response.data.result).length;i++){
                  that.shuzu.push((response.data.result)[i])
                  console.log(response.data.result[i])
                }
              }).catch(function (error) {
                console.log(error);
              });
    },
    search:function(){
      this.shuzu=[];
      this.skyapi(this.searchname)
    }
  }
}
</script>
<style>
a{
  text-decoration: none;
}
li{
   text-align:left;
   list-style-type:none;
}
img{
  width: 100px;
  height: 100px;
  border-radius:50%;
}
</style>

最终效果

----------------------------仅此作为笔记，毕竟好记性不如烂笔头 ^ _^