最近刚开始学Vue.js,感觉上手挺容易的,就用Vue写了个小demo---音乐播放器,代码量比js少了好多。
Html:
<audio :src="'./music/'+music_src" id="audio"></audio>
audio标签的src是用vue动态绑定的:
var audio = document.getElementById("audio");
new Vue({
el: "#music",
data: {
music: [……],
music_src: '',
},
methods: {
play: function(index){
this.music_src = this.music[index].src;
audio.play();
}
}
});
最后发现src是动态绑定进去了,但 audio.play(); 并不能播放,最后把这句去掉后,在audio标签里面加上autoplay属性,音乐就能动态加载播放了。
<audio :src="'./music/'+music_src" id="audio" autoplay=""></audio>