页面:
主要代码:
:class="{'navOnCss':navOn == index}"
或者
:class="navOn == index ? 'navOnCss' : 'defaultCss' "
<div class="menuName">
<div v-for="(item, index) in navlist" :key="index">
<a :href="item.url" target="_blank"
:class="{'navOnCss':navOn == index}"
@mouseenter="addnavCss(index)">
{{item.title}}
</a>
</div>
</div>
<!-- 或者 :class 用三目运算的方法写 -->
<div class="menuName">
<div v-for="(item, index) in navlist" :key="index">
<a :href="item.url" target="_blank"
:class="navOn == index ? 'navOnCss' : 'defaultCss' "
@mouseenter="addnavCss(index)">
{{item.title}}
</a>
</div>
</div>
数据:
navOn: 0, // 默认动态样式在navlist的第一个title,第一个标题高亮
navlist:[
{
title:"党建工作",
url: '/list/02310004'
},
{
title:"工会之家",
url: '/list/02310005'
},
{
title:"纪委监察",
url: '/list/02310002'
},
{
title:"团青工作",
url: '/list/02310001'
}
]
方法:
methods: {
// 鼠标进入事件:hover到第index个标题上
addnavCss(index) {
this.navOn = index
}
}
样式:
/* 动态样式,高亮样式 */
.menuName .navOnCss {
background-color: rgb(0, 98, 177);
color: #fff;
}
/* 默认样式 */
.menuName .defaultCss {
background-color: (223, 223, 223);
color: #000;
}
效果: