VUE是一款開源的JavaScript框架，由于其簡(jiǎn)單易學(xué)的特點(diǎn)，成為了眾多開發(fā)人員的首選。作為一款WEB應(yīng)用框架，VUE自帶了很多實(shí)用的功能，其中的BGM功能便是一大亮點(diǎn)。

在VUE中，使用BGM功能需要引入一個(gè)audio標(biāo)簽，并在data中設(shè)置BGM的相關(guān)參數(shù)。

<audio ref="bgm" loop src="../assets/bgm.mp3"></audio>
<script>
export default {
data () {
return {
bgm: null,
bgmStatus: true //BGM狀態(tài)，默認(rèn)為開啟
}
},
created () {
this.initBGM()
},
methods: {
initBGM () { //初始化BGM
this.bgm = this.$refs.bgm
if (this.bgm) {
this.bgm.play()
if (!this.bgmStatus) {
this.bgm.pause()
}
}
},
bgmToggle () { //切換BGM狀態(tài)
this.bgmStatus = !this.bgmStatus
if (this.bgmStatus) {
this.bgm.play()
} else {
this.bgm.pause()
}
}
}
}
</script>

在上面的代碼中，我們首先引入了一個(gè)audio標(biāo)簽，并且設(shè)置了它的屬性ref，從而獲取音頻對(duì)象。然后在data中設(shè)置了一個(gè)BGM狀態(tài)，默認(rèn)為開啟。在created()生命周期鉤子函數(shù)中，調(diào)用了initBGM()方法，用來(lái)初始化BGM。

接下來(lái)，在methods中定義了兩個(gè)方法：initBGM()和bgmToggle()。initBGM()用來(lái)初始化BGM，首先獲取到audio對(duì)象，然后判斷BGM狀態(tài)是否開啟，若開啟，則調(diào)用play()方法播放BGM；否則調(diào)用pause()方法暫停BGM。bgmToggle()用來(lái)切換BGM狀態(tài)，將BGM狀態(tài)取反，并根據(jù)狀態(tài)調(diào)用play()或者pause()方法。

最后，在模板中使用button綁定bgmToggle()方法，用來(lái)切換BGM狀態(tài)。

<button @click="bgmToggle">{{ bgmStatus ? '關(guān)閉BGM' : '開啟BGM' }}</button>

通過(guò)上面的代碼，我們就可以很方便地在VUE中添加BGM了，不僅可以為我們的WEB應(yīng)用增添氛圍，而且還能夠提高應(yīng)用的用戶體驗(yàn)。