欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解Vue全局組件的掛載之實(shí)現(xiàn)彈窗組件

    詳解Vue全局組件的掛載之實(shí)現(xiàn)彈窗組件

    這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue全局組件的掛載來(lái)實(shí)現(xiàn)彈窗組件，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下
    2022-11-11
  • vue實(shí)現(xiàn)視頻上傳功能

    vue實(shí)現(xiàn)視頻上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)視頻上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解決方法

    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的方法示例

    VueCli3.0中集成MockApi的方法示例

    這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue.js路由vue-router使用方法詳解

    Vue.js路由vue-router使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue.js路由vue-router使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • Vue項(xiàng)目中如何配置src文件下的@別名

    Vue項(xiàng)目中如何配置src文件下的@別名

    這篇文章主要介紹了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)的方法

    本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • vue 虛擬DOM的原理

    vue 虛擬DOM的原理

    這篇文章主要介紹了vue 虛擬DOM的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
    2020-10-10
  • vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解

    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
  • Vue自定義指令的使用詳細(xì)介紹

    Vue自定義指令的使用詳細(xì)介紹

    我們看到的v-開(kāi)頭的行內(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

最新評(píng)論