css鼠标点击改变颜色，点其他的颜色又变回去，去除focus黑边框

<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上的颜色变化