当前位置: 首页 > 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…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...