鍵盤按下上下鍵,li標簽紅色背景可以上下切換

<ul>
    <li v-for="item in list" :key="item" :class="{active:index==item}">
        {item}}
    </li>
</ul>

  data: {
    list: [1, 2, 3, 4, 5],
    index: 1,
  },
  mounted() {
    document.addEventListener("keydown", (e) => {
      if (e.keyCode == 38) {
        if (this.index > 1) {
          this.index--;
        } else {
          this.index = 5;
        }
      } else if (e.keyCode == 40) {
        if (this.index < 5) {
          this.index++;
        } else {
          this.index = 1;
        }
      }
    });
  },

li {
  height: 50px;
  line-height: 50px;
}
.active {
  background-color: #f00;
}