当前位置: 首页 > news >正文

Vue.js组件开发-实现动态切换菜单简单示例

在Vue.js中,实现动态切换菜单通过组件化开发和Vue的响应式数据绑定来实现。

示例:

展示如何创建一个可以动态切换菜单的Vue组件。

首先,需要定义一个Vue组件,该组件将包含菜单项和用于切换菜单的状态。

1. 创建Vue组件

<template><div><!-- 菜单切换按钮 --><button @click="switchMenu">切换菜单</button><!-- 根据当前菜单状态显示不同的菜单 --><ul><li v-if="currentMenu === 'menu1'">菜单1 - 选项1</li><li v-if="currentMenu === 'menu1'">菜单1 - 选项2</li><li v-if="currentMenu === 'menu2'">菜单2 - 选项1</li><li v-if="currentMenu === 'menu2'">菜单2 - 选项2</li></ul></div>
</template><script>
export default {data() {return {// 当前显示的菜单currentMenu: 'menu1'};},methods: {// 切换菜单的方法switchMenu() {this.currentMenu = this.currentMenu === 'menu1' ? 'menu2' : 'menu1';}}
};
</script><style scoped>
/* 样式可以根据需要进行调整 */
button {margin-bottom: 10px;
}
</style>

2. 使用组件

确保已经将其导入并注册到你的Vue实例或另一个组件中。

<template><div id="app"><DynamicMenu /></div>
</template><script>
import DynamicMenu from './components/DynamicMenu.vue'; // 假设组件文件名为DynamicMenu.vueexport default {components: {DynamicMenu}
};
</script>

Vue组件说明:

‌模板部分‌ (<template>):

一个按钮,用于切换菜单。点击按钮时,会调用switchMenu方法。
一个无序列表(<ul>),其中包含根据currentMenu状态条件渲染的菜单项(<li>)。

‌脚本部分‌ (<script>):

data函数返回一个对象,其中包含一个currentMenu属性,用于存储当前显示的菜单。
methods对象包含一个switchMenu方法,用于切换currentMenu的值。如果当前菜单是menu1,则切换为menu2,反之亦然。

‌样式部分‌ (<style scoped>):

根据需要添加更多的样式。

示例实现一个按钮和两个可以动态切换的菜单。每次点击按钮时,菜单都会根据currentMenu的值进行切换。

http://www.lryc.cn/news/513818.html

相关文章:

  • 如何在 Ubuntu 22.04 上优化 Apache 以应对高流量网站教程
  • 17爬虫:关于DrissionPage相关内容的学习01
  • 【HarmonyOS之旅】HarmonyOS概述(一)
  • chatwoot 开源客服系统搭建
  • 30分钟搭建 Typecho 个人博客教程
  • 智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之7 附件(文档)
  • 鸿蒙应用开发启航计划
  • 基本算法——回归
  • 深度学习——神经网络中前向传播、反向传播与梯度计算原理
  • 解决git push报错:not valid: is this a git repository?
  • 树形查询转成TreeNode[],添加新节点
  • 【Rust自学】8.2. Vector + Enum的应用
  • 攻防世界web第十题Web_python_template_injection
  • vmware 修改Ubuntu终端字体大小
  • API 设计:从基础到最佳实践
  • ROUGE指标在自然语言处理中的应用:从理论到实践
  • GraalVM:云原生时代的Java虚拟机
  • Linux 信号集与信号掩码
  • 如何设置Edge浏览器访问软件
  • DL笔记:旋转编码RoPE
  • C语言自定义类型与文件操作
  • 《计算机网络A》单选题-复习题库解析-3
  • VM虚拟机配置ubuntu网络
  • 【每日学点鸿蒙知识】Web高度适配、变量声明规范、动画取消、签名文件、包体积优化相关
  • uniapp使用ucharts组件
  • LabVIEW工程师的未来发展
  • java的bio、nio、aio 以及操作系统的select、poll、epoll
  • 2024 年发布的 Android AI 手机都有什么功能?
  • RLHF,LM模型
  • 【机器学习】工业 4.0 下机器学习如何驱动智能制造升级