当前位置: 首页 > 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的值进行切换。

相关文章:

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

在Vue.js中&#xff0c;实现动态切换菜单通过组件化开发和Vue的响应式数据绑定来实现。 示例&#xff1a; 展示如何创建一个可以动态切换菜单的Vue组件。 首先&#xff0c;需要定义一个Vue组件&#xff0c;该组件将包含菜单项和用于切换菜单的状态。 1. 创建Vue组件 <t…...

如何在 Ubuntu 22.04 上优化 Apache 以应对高流量网站教程

简介 在本教程中&#xff0c;我们将学习如何优化 Apache 以应对高流量网站。 当运行高流量网站时&#xff0c;确保你的 Apache Web 服务器得到优化对于有效处理负载至关重要。在本指南中&#xff0c;我们将介绍配置 Apache 以提高性能和可扩展性的基本技巧。 为高流量网站优…...

17爬虫:关于DrissionPage相关内容的学习01

概述 前面我们已经大致了解了selenium的用法&#xff0c;DerssionPage同selenium一样&#xff0c;也是一个基于Python的网页自动化工具。 DrissionPage既可以实现网页的自动化操作&#xff0c;也能够实现收发数据包&#xff0c;也可以把两者的功能合二为一。 DressionPage的…...

【HarmonyOS之旅】HarmonyOS概述(一)

目录 1 -> HarmonyOS简介 2 -> HarmonyOS发展历程 3 -> HarmonyOS技术特性 3.1 -> 硬件互助&#xff0c;资源共享 3.1.1 -> 分布式软总线 3.1.2 -> 分布式设备虚拟化 3.1.3 -> 分布式数据管理 3.1.4 -> 分布式任务调度 3.1.5 -> 分布式连接…...

chatwoot 开源客服系统搭建

1. 准备开源客服系统&#xff08;我是用的Chatwoot &#xff09; 可以选择以下开源客服系统作为基础&#xff1a; Chatwoot: 开源&#xff0c;多语言&#xff0c;跟踪和分析&#xff0c;支持多渠道客户对接&#xff0c;自动化和工作流等。源码Zammad: 现代的开源工单系统。Fr…...

30分钟搭建 Typecho 个人博客教程

Typecho是一款PHP博客程序&#xff0c;相比于WordPress&#xff0c;Typecho显得更加的轻量级和简洁。现在越来越多的人倾向于用Typecho来搭建个人博客——众所周知&#xff0c;能跑WordPress的机器都不便宜。 Typecho是一款国人团结打造的开源博客系统&#xff0c;和WordPress…...

智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之7 附件(文档)

为AI聊天工具添加一个知识系统 Part1 人性化&去中心化 前情提要 这一次我们暂时抛开前面对“智能工厂的软件设计”的考虑--其软件智能 产品就是 应用程序。直接将这些思维方式和方法论 运用在其具体应用场景中。本文是其中的一个应用场景。 今天用了 一个新的AI助手工具…...

鸿蒙应用开发启航计划

以前有过简单的学习了解&#xff0c;但是现在工作内容的原因&#xff0c;要专门搞这个&#xff0c;因此需要更加熟练地掌握鸿蒙应用开发。 1.开发IDE -- DevEco Studio Windows环境 运行环境要求 为保证DevEco Studio正常运行&#xff0c;建议电脑配置满足如下要求&#xff…...

基本算法——回归

目录 创建工程 加载数据 分析属性 创建与评估回归模型 线性回归 回归树 评估 完整代码 结论 本节将通过分析能源效率数据集&#xff08;Tsanas和Xifara&#xff0c;2012&#xff09;学习基本的回归算法。我们将基 于建筑的结构特点&#xff08;比如表面、墙体与屋顶面…...

深度学习——神经网络中前向传播、反向传播与梯度计算原理

一、前向传播 1.1 概念 神经网络的前向传播&#xff08;Forward Propagation&#xff09;就像是一个数据处理的流水线。从输入层开始&#xff0c;按照网络的层次结构&#xff0c;每一层的神经元接收上一层神经元的输出作为自己的输入&#xff0c;经过线性变换&#xff08;加权…...

解决git push报错:not valid: is this a git repository?

今天想把代码更新到仓库里&#xff0c;执行git push origin master:main的时候报错&#xff1a;not valid: is this a git repository? 查了好多方法都没用。后来经过这篇文章的启发&#xff1a;https://zhuanlan.zhihu.com/p/301518109 可能是由于校园网的问题&#xff0c;…...

树形查询转成TreeNode[],添加新节点

在使用PrimeVue的TreeTable组件时&#xff0c;需要将带有层级的数据转换为TreeNode[]类型的数据结构。TreeNode是PrimeVue中定义的一个接口&#xff0c;用于表示树节点。通常&#xff0c;带有层级的数据是一个嵌套的对象或数组&#xff0c;其中每个对象可能包含子对象&#xff…...

【Rust自学】8.2. Vector + Enum的应用

8.2.0. 本章内容 第八章主要讲的是Rust中常见的集合。Rust中提供了很多集合类型的数据结构&#xff0c;这些集合可以包含很多值。但是第八章所讲的集合与数组和元组有所不同。 第八章中的集合是存储在堆内存上而非栈内存上的&#xff0c;这也意味着这些集合的数据大小无需在编…...

攻防世界web第十题Web_python_template_injection

这是题目&#xff0c;从题目上看是一个python模板注入类型的题目。 首先测试是否存在模板注入漏洞&#xff0c;构造http://61.147.171.105:57423/{{config}} 得到 说明存在模板注入漏洞&#xff0c;继续注入 构造http://61.147.171.105:57423/{{‘’.class.mro}}: 得到 再构造…...

vmware 修改Ubuntu终端字体大小

1. 2、 3、 4、 5、 6、点击select...

API 设计:从基础到最佳实践

https://levelup.gitconnected.com/api-design-101-from-basics-to-best-practices-a0261cdf8886 在本次深入研究中&#xff0c;我们将从基础开始&#xff0c;逐步了解 API 设计&#xff0c;并逐步实现定义卓越 API 的最佳实践。 作为开发人员&#xff0c;您可能熟悉其中的许多…...

ROUGE指标在自然语言处理中的应用:从理论到实践

引言 你是否曾经遇到过机器生成的文本摘要与原文内容不符的情况&#xff1f;或者在使用机器翻译时&#xff0c;发现译文虽然“看起来”正确&#xff0c;但语义却与原文相差甚远&#xff1f;在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;如何科学地评估生成文本的…...

GraalVM:云原生时代的Java虚拟机

1. 概述 GraalVM是由Oracle公司开发的一款高性能、多语言的虚拟机平台。它不仅兼容传统的JVM字节码执行&#xff0c;还引入了即时编译&#xff08;JIT&#xff09;技术的革新&#xff0c;以及对多种编程语言的支持。GraalVM旨在通过提供更高效的执行环境来满足云计算环境中日益…...

Linux 信号集与信号掩码

目录 一、引言 二、信号集是什么 三、信号集关键函数 1.信号集的创建与初始化 2.信号的添加与删除 3.信号集的阻塞与解除阻塞 四、信号集实际应用场景 五、信号掩码的作用 六、信号掩码相关函数 1.sigprocmask 函数 2.sigemptyset 和 sigfillset 函数 七、信号掩码注…...

如何设置Edge浏览器访问软件

使用Edge浏览器访问分销ERP A\V系列软件时会出现各种报错&#xff0c;如何设置Edge浏览器使其正常访问&#xff0c;请看下面的具体操作。 一、打开Edge浏览器&#xff0c;点击右上角的 设置及其他&#xff0c;如图&#xff1a; 二、在弹出界面中&#xff0c;点击 扩展&#xff…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...