在開發一個視頻網站時，我們經常需要保存并播放多個視頻。Vue是一種前端框架，用于構建交互式Web界面。它可以幫助開發人員實現真正的單頁應用程序，并大大提高開發的效率。
new Vue({
el: '#app',
data: {
videoList: [
{
id: 1,
title: '視頻1',
url: 'http://example.com/video1.mp4'
},
{
id: 2,
title: '視頻2',
url: 'http://example.com/video2.mp4'
},
{
id: 3,
title: '視頻3',
url: 'http://example.com/video3.mp4'
}
],
selectedVideo: null
},
methods: {
playVideo(video) {
this.selectedVideo = video;
}
}
})在Vue中保存多個視頻可以通過使用數組來實現。在以上代碼中，我們使用data屬性來定義一個包含三個視頻對象的數組。每個視頻對象包含ID、標題和URL屬性。
在設置data屬性之后，我們可以定義一個用于呈現視頻Player的方法。在此方法中，我們將this.selectedVideo設置為所選視頻的對象，并使用它的屬性來設置視頻播放器的src屬性。
{{ video.title }}
{{ selectedVideo.title }}
在Vue的模板中，我們使用v-for指令迭代視頻數組，并使用v-bind將每個視頻的id屬性作為key傳遞。接下來，我們可以在模板中呈現視頻數組中的每個視頻，并使用@點擊事件將視頻對象分配給playVideo方法。
在選定視頻后，我們根據selectedVideo中的數據輸出播放器元素。在此部分中，我們使用selectedVideo數據的標題和URL屬性來設置視頻和button的標題。
最后一點值得注意的是停止按鈕會將selectedVideo重新設置為null。這將會停止視頻播放。