vue点击一级标题后向下展开二级菜单再次点击收回
可以使用v-if或者v-show来实现点击一级标题后展开和收回二级菜单的效果。
首先,在一级标题的元素上绑定一个点击事件,可以使用@click指令。在点击事件中,我们可以通过改变一个变量的值来控制二级菜单的展开和收回。
然后,在二级菜单的元素上使用v-if或者v-show指令来根据变量的值控制显示和隐藏。
下面是一个示例代码:
<template>
<div>
<h1 @click="toggleSubMenu">{{ title }}</h1>
<ul v-if="showSubMenu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: '一级标题',
showSubMenu: false
}
},
methods: {
toggleSubMenu() {
this.showSubMenu = !this.showSubMenu;
}
}
}
</script>
在上面的代码中,一开始我们设置showSubMenu为false,表示二级菜单是收起状态。当点击一级标题时,toggleSubMenu方法会被调用,将showSubMenu的值取反,从而控制二级菜单的显示和隐藏。
注意,v-if指令会完全销毁和重建元素,而v-show指令只是改变元素的display样式。如果二级菜单的内容比较复杂,而且经常需要显示和隐藏,可以考虑使用v-show,以避免重复渲染的性能问题
原文地址: https://www.cveoy.top/t/topic/iA9N 著作权归作者所有。请勿转载和采集!