如何用Vue來制作歌詞呢？這是一個有趣的問題，下面我們來一步步進行詳細的介紹。

首先，在Vue中，我們可以使用自定義屬性來表示歌詞的時間和內容。例如，我們可以定義一個數組，每個元素包含兩個自定義屬性：time和content，其中time表示歌詞所在的時間，content表示歌詞的內容。

data() {
return {
lyrics: [
{ time: 0, content: 'Oh~yeah~' },
{ time: 5, content: 'I need your love' },
{ time: 8, content: 'I need your time' },
{ time: 12, content: 'When everything's wrong' },
{ time: 15, content: 'You make it right' }
]
}
 }

接下來，我們需要創建一個定時器來實時監聽歌曲的播放時間，并根據當前時間來高亮顯示對應的歌詞。為此，我們可以使用Vue的生命周期函數中的mounted來初始化定時器，并通過watch監聽當前播放時間的變化，實現高亮顯示當前播放的歌詞。

mounted() {
this.$nextTick(() =>{
this.$refs.audio.addEventListener('timeupdate', this.handleTimeUpdate)
})
 },
 methods: {
handleTimeUpdate() {
for (let i = 0; i< this.lyrics.length; i++) {
if (i === this.lyrics.length - 1) {
this.$refs.lyric.childNodes[i - 1].classList.remove('active')
this.$refs.lyric.childNodes[i].classList.add('active')
break
}
if (
this.$refs.audio.currentTime >= this.lyrics[i].time &&
this.$refs.audio.currentTime< this.lyrics[i + 1].time
) {
this.$refs.lyric.childNodes[i].classList.add('active')
this.$refs.lyric.childNodes[i - 1].classList.remove('active')
break
}
}
}
 }

最后，我們在頁面中使用v-for來循環渲染歌詞，同時使用v-bind將歌詞的active屬性與樣式綁定，實現高亮顯示。

{{ item.content }}

以上就是使用Vue制作歌詞的詳細過程，希望可以對大家有所幫助。