当我完成vue老师布置的作业时，碰到了一个问题。 我费了半天劲实现了一个button在点击时会有高亮效果的样式，用了vue里的动态样式来实现。但我显然忘了完全可以用：focus的伪类来代替。 ``
```<script setup>
import hot from './hot_search.vue';
import financial from './financial.vue';
import life from './people_life.vue';
import { ref, shallowRef } from 'vue';
const showing=shallowRef(hot)
const dic={
'hot':hot,
'financial':financial,
'life':life
}
// const ck=(k)=>{
// showing.value=dic[k]
// console.log(dic[k])
// }
// 不同的button样式修改完全可以用：focus和：hover，没必要写一堆js
</script>
<template>
<h2>百度热搜 ></h2>
<!-- <button @click="ck('hot')" :class="{'activated':showing==hot}">热搜榜</button>
<button @click="ck('life')" :class="{'activated':showing==life}">民生榜</button>
<button @click="ck('financial')" :class="{'activated':showing==financial}">财经榜</button> -->
<button @click="showing=hot" :class="{'activated':showing==hot}">热搜榜</button>
<button @click="showing=life" :class="{'activated':showing==life}">民生榜</button>
<button @click="showing=financial" :class="{'activated':showing==financial}">财经榜</button>
<br>
<div>
<keep-alive >
<component :is="showing"></component>
</keep-alive>
</div>
</template>
<style>
button{
width: 80px;
height: 40px;
margin:10px;
border:none;
background-color: #eee;
color:blue;
border-radius:10% ;
line-height: 40px;
}
.activated{
background-color: bisque;
font-size: 20px;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
ul{
padding-left: 0;
}
li span{
display: inline-block;
width:40px;
}
</style>
