vue中点击导航栏部分，页面切换

最新推荐文章于 2025-05-28 21:34:11 发布

weixin_30652897

最新推荐文章于 2025-05-28 21:34:11 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript java ui ViewUI

原文链接：http://www.cnblogs.com/yd-MM/p/9909827.html

本文介绍如何使用Vue.js创建动态导航栏，通过点击不同部分实现页面切换，并更改选中项的颜色。代码示例展示了如何配置路由和绑定点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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