<div  v-for="item in date" :key="item.id" class="div" tabindex="1">
      <p>{{ item.name}}</p>
 </div>

首先要在v-for的div里面加tabindex=‘1’
然后设置样式

.div {
    &:focus {
      color: yellow;
      background-color: red;
      outline: 0px;
    }
    &:hover {
      color: yellow;
      background-color: black;
    }
}

&:focus是点击之后的颜色变化,如果不把outline设置为0px,会有一个黑边框,不好看
&:hover是鼠标移动到div上的颜色变化

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐