Vue的v-for指令可以幫助我們渲染出一個(gè)列表，這在開(kāi)發(fā)中非常常見(jiàn)。而為了增加可訪(fǎng)問(wèn)性和用戶(hù)體驗(yàn)，我們希望能夠使用鍵盤(pán)方向鍵（上下左右）來(lái)操作列表中的元素。

Vue提供了一個(gè)鍵盤(pán)修飾符v-on:keyup，可以監(jiān)聽(tīng)鍵盤(pán)按鍵事件。比如我們可以這樣監(jiān)聽(tīng)上下鍵：

{{ item }}

其中activeIndex用來(lái)標(biāo)記當(dāng)前選中的元素，moveUp和moveDown分別用來(lái)移動(dòng)選中元素的位置。我們現(xiàn)在來(lái)看看moveUp和moveDown的實(shí)現(xiàn)：

{
...
methods: {
moveUp() {
if (this.activeIndex === 0) {
return
}
this.activeIndex -= 1
},
moveDown() {
if (this.activeIndex === this.list.length - 1) {
return
}
this.activeIndex += 1
}
}
}

通過(guò)點(diǎn)擊上下鍵，我們可以調(diào)用moveUp和moveDown方法，來(lái)更改activeIndex的值，從而實(shí)現(xiàn)列表元素的移動(dòng)。另外，我們?cè)趌i元素上綁定了一個(gè):class屬性，用來(lái)動(dòng)態(tài)控制元素的樣式，從而實(shí)現(xiàn)選中效果。