Vue實(shí)現(xiàn)嵌套菜單組件
更新時(shí)間：2022年07月15日 16:02:05 作者：沒(méi)你好看
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本案例為大家分享了Vue實(shí)現(xiàn)嵌套菜單組件的具體代碼，供大家參考，具體內(nèi)容如下
本文旨在使用Vue.js完成一個(gè)嵌套的菜單組件，使用mock.js對(duì)數(shù)據(jù)進(jìn)行模擬，并且最小化復(fù)現(xiàn)功能
安裝mock
cnpm i mockjs
//引入mockjs
import Mock from 'mockjs'
//使用mockjs模擬數(shù)據(jù)
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": "第五層"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
});菜單組件
<!--
?* @Author: byron
?* @Date: 2022-02-24 09:01:27
?* @LastEditTime: 2022-02-24 10:50:38
-->
<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>嵌套組件的實(shí)現(xiàn)</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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue3+TypeScript實(shí)現(xiàn)遞歸菜單組件的完整實(shí)例
- 原生Vue 實(shí)現(xiàn)右鍵菜單組件功能
- vue iview的菜單組件Mune 點(diǎn)擊不高亮的解決方案
- Vue.js下拉菜單組件使用方法詳解
- vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼
- vue移動(dòng)端UI框架實(shí)現(xiàn)QQ側(cè)邊菜單組件
- vuejs實(shí)現(xiàn)遞歸樹型菜單組件
- Vue側(cè)滑菜單組件——DrawerLayout
- Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
- vue多級(jí)多選菜單組件開發(fā)
相關(guān)文章
詳解Vue全局組件的掛載之實(shí)現(xiàn)彈窗組件
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue全局組件的掛載來(lái)實(shí)現(xiàn)彈窗組件，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)視頻上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-06-06
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js路由vue-router使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue項(xiàng)目中如何配置src文件下的@別名問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了vue 虛擬DOM的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁(yè)時(shí)我們有些時(shí)候需要記住一些用戶選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁(yè)時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
我們看到的v-開頭的行內(nèi)屬性，都是指令，不同的指令可以完成或?qū)崿F(xiàn)不同的功能，對(duì)普通 DOM元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令2022-09-09