要在 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>
在这里,我们将两个音乐文件分别命名为 music1.mp3
和 music2.mp3
,并使用 audio
标签将它们添加到组件中。注意,我们为每个音乐文件创建了一个 ref
属性,这些引用将用于在 methods
中播放音乐。
接下来,我们在 methods
中定义了两个函数, playMusic1
和 playMusic2
,分别播放 music1.mp3
和 music2.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
中设置的函数以播放音乐。