vue css 动态样式 :class

m0_59985666

于 2024-08-09 17:31:50 发布

阅读量133

点赞数 1

文章标签： vue.js css windows

本文链接：https://blog.csdn.net/m0_59985666/article/details/141066798

版权

页面：

主要代码：

: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;
}

效果：