写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面、并且点击的时候更换颜色

代码自己简单的写一下:(vue)

<nav>  
  <ul>     <li v-for="(item, i) in navData" :class="{ nav_li : active === i }" :key="i" @click="$router.push({ path: item.path }), active = i">       {{item.name}}     </li> </ul>
</nav>

js部分代码:

<script>
export default {
  data () {
    return {
      active: 0,
      navData: [
        { name: '1', path: '/配置的路由' },
        { name: '2', path: '/配置的路由' },
        { name: '3', path: '/配置的路由' },
        { name: '4', path: '/配置的路由' },
        { name: '5', path: '/配置的路由' }
      ]
    }
  }
</script>

css样式:

 ul {
        width: 1200px;
        height: 88px;
        line-height: 88px;
        margin: 0 auto;
        background: #3b2d50;
        color: #fff;
        font-size: 18px;
        display: flex;
         justify-content: space-between;
       
        li {
                text-align: center;
            }
            .nav_li {
                background-color: #dedede;
                color: #353535;
  }            

 

转载于:https://www.cnblogs.com/yd-MM/p/9909827.html

Logo

前往低代码交流专区

更多推荐