vue3 a标签播放音乐

在Vue3中，你可以使用`v-bind`指令和HTML5的`audio`元素来创建一个动态播放音乐的a标签。这里是一个基本的例子：

<template>
  <div>
    <a :href="musicUrl" @click.prevent="playMusic">
      <i class="fa fa-play-circle"></i> 点击播放
    </a>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const musicUrl = ref('path/to/music.mp3'); // 替换为你的音乐文件路径

function playMusic() {
  const audio = document.querySelector('audio');
  if (audio) {
    audio.play();
  }
}
</script>
<style scoped>
/* 可选样式 */
.fa-play-circle {
  cursor: pointer;
}
</style>

在这个例子中，`musicUrl`是一个响应式的Vue变量，当你设置或改变这个变量的值，链接的URL就会更新。点击a标签时，`playMusic`函数会通过JavaScript控制audio元素播放音乐。