Vue嵌套菜单组件如何改写为长尾？

2026-03-31 17:081阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计558个文字，预计阅读时间需要3分钟。

案例示例：家庭分享了Vue实现嵌套菜单组件的整体代码，供大家参考。本文使用Vue.js完成一个嵌套的菜单组件，利用mock.js对数据进行模拟，并最小化实现功能。

本案例为大家分享了Vue实现嵌套菜单组件的具体代码，供大家参考，具体内容如下

本文旨在使用Vue.js完成一个嵌套的菜单组件，使用mock.js对数据进行模拟，并且最小化复现功能

安装mock

cnpm i mockjs

//引入mockjs import Mock from 'mockjs' //使用mockjs模拟数据 Mock.mock('/menuData', 'get', { "ret": 0, "data": [{ "id": 1, "name": "第一层", "children": [{ "name": "第二层" }, { "name": "第二层" }, { "name": "第二层" } ] }, { "id": 2, "name": "第一层", "children": [{ "name": "第二层" }, { "id": 3, "name": "第二层", "children": [{ "name": "第三层" }, { "name": "第三层" }, { "name": "第三层" } ] }, { "id": 4, "name": "第二层", "children": [{ "name": "第三层" }, { "name": "第三层" }, { "id": 5, "name": "第三层", "children": [{ "name": "第四层" }, { "name": "第四层" }, { "id": 6, "name": "第四层", "children": [{ "name": "第五层" }, { "name": "第五层" }, { "name": "第五层" } ] } ] } ] } ] } ] });

菜单组件

<template> <div> <ul class="menu" v-for="item in data" :key="item.id"> <li class="subMenu" @click="showhd(item)" :class="[item.children ? 'color' : '']" > <span> {{ item.name }} {{ item.id }}</span> </li> <div class="child" v-if="item.id == currentId && openFlag"> <xxxx v-if="item.children" :data="item.children"></xxxx> </div> </ul> </div> </template> <script> export default { name: 'xxxx', components: {}, props: ['data'], data() { return { currentId: undefined, openFlag: false, } }, methods: { showhd(a) { console.log(this.openFlag) this.openFlag = !this.openFlag this.currentId = a.id console.log(this.currentId) console.log(this.openFlag) }, }, } </script> <style scoped> li { text-decoration: none; /* list-style: none; */ } .ul { overflow: hidden; } .head { display: none; } .show { display: block; } .color { color: brown; } </style>

使用菜单组件

<template> <div id="app"> <h1>嵌套组件的实现</h1> <HelloWorld :data="menu" /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' import axios from 'axios' export default { name: 'App', components: { HelloWorld, }, data() { return { menu: [], } }, async created() { const { data: r } = await axios.get('/menuData') this.menu = r.data console.log(this.menu) }, } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：vue 实现嵌套菜单组件