<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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐