前言：
今天大家对“我要色导航”大体比较珍视，我们都需要学习一些“我要色导航”的相关资讯。那么小编在网络上收集了一些有关“我要色导航””的相关文章，希望咱们能喜欢，大家快快来了解一下吧！这里我用的是vue框架和element ui组件库写的。主要就是一个点击事件和一个for循环。
HTML
<div id="app"> <!-- 导航栏 --> <div id="nav"> <router-link @click.native="dianji(index)" :class="{ clk: index == dynamic }" v-for="(item, index) in navArr" :key="index" :to="item.path"> {{ item.content }} </router-link> </div> <router-view /> </div>@click.native和@click差不多，但是router-link会阻止click事件，所有加一个native就可以了。
JS
<script>export default { name: "app", data() { return { // 导航按钮数组 navArr: [ { path: "/one", content: "第一个按钮" }, { path: "/two", content: "第二个按钮" }, { path: "/three", content: "第三个按钮" }, { path: "/four", content: "第四个按钮" }, ], dynamic:0, //默认第一个 }; }, methods: { // 点击切换导航栏背景色 dianji: function (index) { this.dynamic = index; }, },};</script>css这里我就不写了，就几行代码。
效果图没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~
本文来自曾经的你h投稿，不代表资源分享网立场，如若转载，请注明出处：https://duduzhe.cn/fbb85B2pSVQdQBl1Q.html
微信扫一扫 
支付宝扫一扫 
发表回复
评论列表（0条）