Vue 动态给元素添加类名 / 动态切换显示选项卡内容

实现效果如下：

1、鼠标悬停在对应title时，当前class=on，其他class=""。

2、鼠标悬停在对应title时，选项卡内容根据title对应切换显示

 html

<!-- 切换选项卡 -->
<div class="main-newsRepublic-change">
    <ul>
        <li @mouseover="show(1)" :class="{on : liActiveClass == 1}" >广州要闻</li>
        <li @mouseover="show(2)" :class="{on : liActiveClass == 2}" >政声传递</li>
        <li @mouseover="show(3)" :class="{on : liActiveClass == 3}" >政务联播</li>
        <li @mouseover="show(4)" :class="{on : liActiveClass == 4}" >今日关注</li>
    </ul>
</div>

<!-- 内容列表 -->
<div class="newsList">
    <ul class="newsList-ul"  v-show="liActiveClass==1?true:false">
        <li><a href="#">11111</a><span>2023-10-16</span></li>
        <li><a href="#">11111</a><span>2023-10-18</span></li>
        <li><a href="#">11111</a><span>2023-10-14</span></li>
    </ul>
    <ul class="newsList-ul"  v-show="liActiveClass==2?true:false">
        <li><a href="#">22222</a><span>2023-10-16</span></li>
        <li><a href="#">22222</a><span>2023-10-18</span></li>
        <li><a href="#">22222</a><span>2023-10-14</span></li>
    </ul>
    <ul class="newsList-ul"  v-show="liActiveClass==3?true:false">
        <li><a href="#">33333</a><span>2023-10-16</span></li>
        <li><a href="#">33333</a><span>2023-10-18</span></li>
        <li><a href="#">33333</a><span>2023-10-14</span></li>
    </ul>
    <ul class="newsList-ul"  v-show="liActiveClass==4?true:false">
        <li><a href="#">44444</a><span>2023-10-16</span></li>
        <li><a href="#">44444</a><span>2023-10-18</span></li>
        <li><a href="#">44444</a><span>2023-10-14</span></li>
    </ul>
</div>

JS

export default {
    name: "xxx", 
    data(){
        return{
            // 默认显示 “第一个ul”
            liActiveClass: 1,
            // 默认显示 “广州要闻”
            showValue : 1,
        }
    },
    methods: {
        show(showIndex) {
            // 根据showIndex，切换class值与v-show的值
            this.liActiveClass = showIndex;
        },
    }
}

CSS

/* 样式选中 */
.on{
border-bottom: #cc3333 2px solid;
margin-bottom: 0px;
font-weight: bold;
color: #cc3333;
}


/* 切换选项卡 */
.main-newsRepublic-change{
    overflow: hidden;
    background: #efefef;
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}
.main-newsRepublic-change ul{
    padding: 0;
}
.main-newsRepublic-change ul li{
    float: left;
    height: 38px;
    cursor: pointer;
    width: 25%;
}


/* 内容列表 */
.newsList-ul{
    padding-inline-start: 0px;
    list-style: none;
    text-align: left;  
}
.newsList-ul li{
    position: relative;
    height: 35px !important;
    line-height: 35px !important;
    padding: 0 100px 0 18px;
}
.newsList-ul li::after{
    position: absolute;
    content: " ";
    left: 0;
    top: 50%;
    margin-top: -1px;
    width: 4px;
    height: 4px;
    background: #000;
}
.newsList-ul li a{
    float: left;
    max-width: 100%;   
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.newsList-ul span{
    position: absolute;
    right: 0;
    top: 0;
    color: #999999;
}