通过Vue实现控制audio点一下播放再次点击关闭音乐

你可以使用Vue的事件绑定和条件渲染来实现控制audio的播放和暂停。下面是一个示例代码：

<template>
  <div>
    <button @click="toggleAudio">{{ isPlaying ? '关闭音乐' : '播放音乐' }}</button>
    <audio ref="audio" :src="audioSrc"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
      audioSrc: 'path/to/audio.mp3'
    }
  },
  methods: {
    toggleAudio() {
      const audio = this.$refs.audio;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    }
  }
}
</script>

在上面的代码中，我们使用了isPlaying来表示音乐是否正在播放。当点击按钮时，toggleAudio方法会根据isPlaying的值来切换音乐的播放和暂停状态，并更新isPlaying的值。按钮上的文本也会根据isPlaying的值来显示不同的文本。

注意，上面的代码中的audioSrc是音乐文件的路径，你需要将其替换为你自己的音乐文件路径。另外，你也可以根据需要添加其他的音乐控制功能，比如音量控制、进度条等等。