vue实现顶部导航栏

<>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>

• « 上一篇：网络层协议-IP分组
• » 下一篇：Linux系统函数API----基本概念