色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue做遞歸菜單

劉姿婷2年前8瀏覽0評論

遞歸是指在程序執行中調用自身的一種行為,Vue的遞歸組件開發技巧可以用于菜單或者樹形結構的遞歸渲染,提高編程的效率和交互的友好程度。在Vue中,通過v-for指令可以遍歷數組和對象,通過v-if指令可以根據條件顯示或隱藏元素。當需要將一個數組的內容進行嵌套渲染時,可以使用遞歸組件的方式來實現。

<template>
<div v-if="item.children" class="sub-menu"><ul>
<li v-for="submenu in item.children" :key="submenu.id">
<router-link :to="{ name: submenu.name }" exact-active-class="active">{{submenu.title}}</router-link>
<my-menu :items="submenu.children" v-if="submenu.children" />
</li>
</ul>
</div>
<router-link v-else :to="{ name: item.name }" exact-active-class="active">{{ item.title }}</router-link>
</template>
<script>
export default {
name: 'my-menu',
props: {
items: {
type: Array,
required: true
}
}
}
</script>

在上面的代碼中,我們首先判斷了是否存在子菜單,如果存在我們就會將其以嵌套的方式展示出來,如果不存在則會顯示當前菜單項的title。這里用到了Vue的自定義組件,通過props將數據傳遞給組件,在組件內部進行渲染展示。

另外,遞歸組件可能會導致無限循環渲染,因此需要設置結束遞歸的條件。一般來說,對于樹形結構菜單等遞歸的內容,我們可以通過設置縮進等視覺效果讓用戶清晰地了解到當前節點在哪個層級,同時也可以設置層級的最大數量。當超過最大層級時,渲染將停止,以避免無限循環的問題。如下所示:

const MAX_LEVEL = 3
export default {
name: 'my-menu',
props: {
items: {
type: Array,
required: true
},
level: {
type: Number,
default: 0
}
},
computed: {
visibleItems () {
if (this.level >MAX_LEVEL) {
return []
}
return this.items
}
}
}

這里我們設置了一個MAX_LEVEL的常量,當遞歸的層數超過設定的最大層數時,就會停止遞歸渲染。并且我們將這個常量設置為3,如果超過三層,則會停止遞歸渲染,以避免無限循環的問題。

總結來說,在Vue中,使用遞歸組件可以實現多層級嵌套渲染,非常適用于菜單或樹形結構中的數據展示,遞歸組件需要注意避免無限循環的問題,可以設置最大層數來避免該問題。以上就是Vue做遞歸菜單的相關內容,希望可以幫助到大家。