最近刚开始学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>