vue基础篇 04 综合应用
作者：互联网
04 综合应用
实战演练
音乐播放器
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
<style type="text/css">
ul{
float: left;
height: 1000px;
width: 350px;
overflow: auto;
}
li{
list-style: none;
height: 30px;
width: 350px;
}
audio{
float: left;
}
span{
font-size: 10px;
}
</style>
</head>
<body>
<div id="app">
<input type="text"
v-model="inputValue"
@focus="inputFuncus()"
@blur="inputBlur()"
@keyup.enter="searchKeyWord(inputValue)"/>
<br>
<audio :src="songUrl" autoplay="autoplay" controls="controls"></audio>
<br>
<ul>
<li v-for="item in songs">
<a href="#" @click="searchSongId(item.id)">
{{item.name}}
</a>
<span>-{{item.artists[0].name}}</span>
<span>{{item.alias[0]}}</span>
<a href="#" v-show="item.mvid!=0" @click="searchMVId(item.mvid)">
mv
</a>
</li>
</ul>
<div v-show="isShow">
<video :src="mvUrl" controls="controls" autoplay="autoplay">
</video>
</div>
</div>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
inputValue:'歌名、歌手',
songs:[],
songUrl:'',
mvUrl:'',
isShow:false
},
methods:{
inputFuncus:function(){
if(this.inputValue=='歌名、歌手'){
this.inputValue='';
}
},
inputBlur:function(){
if(this.inputValue==''){
this.inputValue='歌名、歌手';
}
},
searchKeyWord:function(keyWord){
var that=this;
axios.get('https://autumnfish.cn/search?keywords='+keyWord)
.then(
function(response){
console.log(response);
that.songs=response.data.result.songs;
},
function(error){
}
)
},
searchSongId:function(id){
var that=this;
axios.get('https://autumnfish.cn/song/url?id='+id)
.then(
function(response){
that.songUrl=response.data.data[0].url;
console.log(that.songUrl);
},
function(error){
}
)
},
searchMVId:function(mvId){
var that=this;
axios.get('https://autumnfish.cn/mv/url?id='+mvId)
.then(
function(response){
that.mvUrl=response.data.data.url;
console.log(that.mvUrl);
that.isShow=true;
},
function(error){
}
)
}
}
});
</script>
</body>
</html>
效果
标签：function,vue,04,id,inputValue,应用,data,response,nbsp 来源： https://blog.csdn.net/qilie_32/article/details/114377642