问题：点击后替换url地址，实现了，但是播放器依旧没有反应。
解决：vue中动态替换只是替换了地址，并没有告诉audio标签是否要执行，执行什么操作。要load后才能让它知道，是在喊他，他需求进行操作了！
页面设计用的是element
点击试听的时候弹出效果，点击x的时候，关闭音乐。
代码
<transition name="el-zoom-in-bottom"> <div class="mp3Audio" v-show="mp3Audio"> <div class="audioClose" @click="closeAudio"><i class="el-icon-close"></i></div> <div class="mp3Name">{{mp3Name}}</div> <audio controls="controls" ref="audioRef"> <source :src="mp3Url" type="audio/mp3"/> <source :src="mp3Url" type="audio/ogg"/> Your browser does not support this audio format. </audio> </div> </transition>
// 点击试听，绑定地址，dom，自动播放 handleListen(row) { console.log(row); this.mp3Name = row.ptitle this.mp3Url = row.purl this.mp3Audio = true const audioRef = this.$refs.audioRef audioRef.load() audioRef.play() }, // 关闭播放器 closeAudio() { const audioRef = this.$refs.audioRef audioRef.pause() this.mp3Name = "" this.mp3Url = "" this.mp3Audio = false },
