<>vue实现顶部导航栏

<>实现导航的主要思路为

* 点击某一项的时候拿到相应的index 。
* 然后把这个index赋值给isActiveNum 。
* 再用router-link里面的index去对比。
* 如果一样的话就加上isActive类 否则类名为空。 <div class="nav"> <ul @click="() =>
this.btnMenu(index)" v-for="(item, index) in this.list" :key="item.index" >
<li> <router-link :class="this.isActiveNum === index ? 'isActive' : ''"
:to="item.link" >{{ item.menu }}</router-link > </li> </ul> </div> <script>
import { reactive, toRaw, ref, onMounted } from "vue"; export default { setup()
{ const isActiveNum = ref(0); const menuList = reactive([ { menu: "首页", link:
"/home" }, { menu: "作品", link: "/works" }, { menu: "想说", link: "/wantsay" }, {
menu: "关于", link: "/about" }, ]); const list = toRaw(menuList); onMounted(() =>
{}); const btnMenu = (index) => { isActiveNum.value = index; }; return {
btnMenu, isActiveNum, list }; }, }; </script> <style scoped> .isActive { color:
#f23051; } </style>

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信