【Vue】动态修改音频url

前言

在网页加载完毕后，动态地通过this.musicUrl = '音频地址'添加音频地址，发现并没反应，解决方法如下：

代码

<template>
  <div id="music_bar">
    <audio id="music" ref="audio" controls>
      <source :src="music_src" />
    </audio>
    <br />
    <el-button type="primary" size="default" @click="changeMusic"
      >切换音乐</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      music_src: "",
    };
  },
  methods: {
    changeMusic() {
      let url = "音频地址";
      this.$refs.audio.src = url;
    },
  },
};
</script>

可以通过使用vue中的refs属性，this.$refs.audio表示我们绑定一个ref属性值为audio的标签，设置其的src属性，也就是音频的地址，就可以通过动态绑定音乐的播发地址。

效果如下：