淘先锋技术网

首页 1 2 3 4 5 6 7

要在 Vue 中添加两段音乐,需要使用 audio 标签,并在 Vue 组件中进行配置。以下是如何添加两段音乐的方法:

<template>
  <div>
    <audio src="music1.mp3" ref="music1"/>
    <audio src="music2.mp3" ref="music2"/>
  </div>
</template>

<script>
export default {
  methods: {
    playMusic1() {
      this.$refs.music1.play();
    },
    playMusic2() {
      this.$refs.music2.play();
    }
  }
}
</script>

vue怎样添加两段音乐

在这里,我们将两个音乐文件分别命名为 music1.mp3music2.mp3,并使用 audio 标签将它们添加到组件中。注意,我们为每个音乐文件创建了一个 ref 属性,这些引用将用于在 methods 中播放音乐。

接下来,我们在 methods 中定义了两个函数, playMusic1playMusic2,分别播放 music1.mp3music2.mp3。通过引用 this.$refs,我们可以访问在 template 中创建的 audio 标签,并调用它们的 play() 方法以播放音乐。

最后,我们可以在组件的 template 中添加访问这些函数的按钮:

<template>
  <div>
    <audio src="music1.mp3" ref="music1"/>
    <audio src="music2.mp3" ref="music2"/>
    <button @click="playMusic1">Play Music 1</button>
    <button @click="playMusic2">Play Music 2</button>
  </div>
</template>

在这个例子中,我们为每个音乐文件添加了一个按钮,点击按钮将调用我们在 methods 中设置的函数以播放音乐。