Vue

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

代码自己简单的写一下：(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;
  }