寫頁面的時候都會用到一些導航欄、點擊不同的部分切換不同的頁面、并且點擊的時候更換顏色

代碼自己簡單的寫一下：(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

總結

以上是生活随笔為你收集整理的vue中点击导航栏部分，页面切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。