console
new Vue({
el:'#app',
data:{
searchtext:'樱花草',
musicList:[]
},
methods:{
search:function(){
var that=this;
axios.get('https://autumnfish.cn/search?keywords='+this.searchtext)
.then(function(response){console.log(response);
})
.catch(function(err){console.log('垃圾')})
}
}
})
<div id="app">
<div class="top">
<input type="text" v-model='searchtext' @keyup.Enter='search'><button>搜索</button>
</div>
<div class="center">
<div class="musicList">
<ul>
<li></li>
</ul>
</div>
<div class="music_info"></div>
<div class="music_assess"></div>
</div>
<div class="bottom">
</div >
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
*{
margin: 0;
padding: 0;
}
#app{
margin: 0 auto;
background-color: blue;
margin-top: 100px;
width:500px ;
height: 400px;
}
.top{
width: 500px;
height: 50px;
background-color: blueviolet;
}
.center{
width: 500px;
height: 300px;
}
.musicList{
width: 120px;
height: 300px;
background-color: white;
float: left;
}
li{
list-style: none;
}
.music_info{
width: 260px;
height: 300px;
background-color: red;
float: left;
}
.music_assess{
width: 120px;
height: 300px;
background-color: white;
float: left;
}
.bottom{
width: 500px;
height: 50px;
background-color: blueviolet;
}