VUE2 tab切换导航 展示页面内容(父级子级独立)

VUE2 tab切换导航 展示页面内容 父级子级独立

    • 图片示例
    • 代码

图片示例

在这里插入图片描述
在这里插入图片描述

代码

<template><div class="center"><!-- 一级导航 --><div class="menu"><div class="menu_list"><div v-for="item of List" :key="item.id"><div class="menu_item" @click="onClick(item)" :class="item.id == onActive ? 'active' : 'moren'">{{ item.name }}</div></div></div><!-- 二级导航 --><div class="menu_list"><div v-for="TableList of childrenList" :key="TableList.id"><div class="menu_item_son" @click="sonClick(TableList)":class="TableList.id == onActive ? 'son_active' : 'moren'">{{ TableList.name }}</div></div></div></div><!-- 组件 --><div class="center_body"><component :is="componentnext"></component></div></div></template><script>
import RW03 from "./rw03.11.vue";
...export default {components: {RW03,...},data() {return {childrenList: [],List: [{id: 1,name: "RW01",componentnext: "RW01",children: [],},{id: 2,name: "RW02",componentnext: "RW02",children: [],},{id: 3,name: "RW03",componentnext: "RW03",children: [{ id: 43, name: "RW03.11", componentnext: "RW03" },{ id: 4, name: "RW03.12", componentnext: "RW0312" },{ id: 5, name: "RW03.51", componentnext: "RW0351" },{ id: 6, name: "RW03.52", componentnext: "RW0352" },],},...],onActive: "1", // RW01 的id为1componentnext: "RW01",};},methods: {onClick(item) {// console.log(item);var _this = this;_this.childrenList = item.children;_this.onActive = item.id;_this.componentnext = item.componentnext;},sonClick(item) {var _this = this;_this.onActive = item.id;_this.componentnext = item.componentnext;},},
};
</script>
<style scoped>
.center {margin: 10px 20px;height: 100%;
}.menu {border: 2px solid #409EFF;padding: 10px;
}.menu_list {display: flex;flex-wrap: wrap;
}.menu_item {width: 150px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin: 5px;font-weight: bold;
}.menu_item_son {width: 150px;height: 40px;line-height: 40px;text-align: center;background-color: #F2F6FC;margin: 5px;font-weight: bold;
}.active {font-weight: bold;background-color: #409EFF;color: #fff;
}.son_active {font-weight: bold;background-color: #67C23A;color: #fff;
}.center_body {margin: 20px 0;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/331278.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常见算法(3)

1.Arrays 它是一个工具类&#xff0c;主要掌握的其中一个方法是srot&#xff08;数组&#xff0c;排序规则&#xff09;。 o1-o2是升序排列&#xff0c;o2-o1是降序排列。 package test02; import java.util.ArrayList; import java.util.Arrays; import java.util.Comparat…

C#【进阶】迭代器

迭代器 文章目录 1、迭代器概念2、标准迭代器的实现方法3、用yield return 语法糖实现迭代器4、用yield return 语法糖为泛型类实现迭代器 1、迭代器概念 迭代器&#xff08;iterator&#xff09; 又称光标&#xff08;cursor&#xff09; 是程序设计的软件设计模式 迭代器提供…

IPv6 地址创建 EUI-64 格式接口 ID 的过程

IPv6 接口标识符 IPv6 地址中的接口标识符&#xff08;ID&#xff09;用于识别链路上的唯一接口&#xff0c;有时被称为 IPv6 地址的 “主机部分”。接口 ID 在链路上必须是唯一的&#xff0c;始终为 64 位长&#xff0c;并且可以根据数据链路层地址动态创建。 MAC 地址 中的…

操作系统入门系列-MIT6.828(操作系统工程)学习笔记(一)---- 操作系统介绍与接口示例

MIT6.S081&#xff08;操作系统&#xff09;学习笔记 操作系统入门系列-MIT6.S081&#xff08;操作系统&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&a…

Jenkins在windows上进行安装

今天为了实现jmeter接口测试脚本的持续性集成安装了jenkins&#xff0c;主要记录jenkins的安装和端口的修改。 前提条件&#xff1a;安装了jdk&#xff0c;我本机安装的jdk1.8。 1.下载jenkins安装包 安装jenkins我们需要先下载安装包&#xff0c;可以通过下面的链接进行下载&a…

Qt快速入门到熟练(电子相册项目(一))

经过一段时间的学习&#xff0c;相信大家对QT的基本用法都有所了解&#xff0c;从这篇文章开始&#xff0c;我准备记录一下电子相册的项目的一个学习过程。 实现项目创建功能 对于这个电子相册的项目&#xff0c;我并没有在一开始就把所有可能用到的功能模块去事无巨细的考虑周…

C# 结合 JS 暴改腾讯 IM SDK Demo

目录 关于腾讯 IM SDK Demo 范例运行环境 设计思路 服务端生成地址 IM 服务端接收 IM 客户端程序 小结 关于腾讯 IM SDK Demo 腾讯云即时通信 IM SDK 提供了单聊、群聊、关系链、消息漫游、群组管理、资料管理、直播弹幕等功能&#xff0c;并提供完备的 App 接入及管…

小猪APP分发:一站式托管服务,轻松玩转应用市场

在当今移动应用爆炸式增长的时代&#xff0c;开发者们面临的挑战不再仅限于创意的火花和代码的实现&#xff0c;更在于如何让精心打造的应用快速触达广大用户。这正是小猪APP分发www.appzhu.net应运而生的背景——作为一个全面、高效的APP托管服务分发平台&#xff0c;它为开发…

用于时间序列概率预测的蒙特卡洛模拟

大家好&#xff0c;蒙特卡洛模拟是一种广泛应用于各个领域的计算技术&#xff0c;它通过从概率分布中随机抽取大量样本&#xff0c;并对结果进行统计分析&#xff0c;从而模拟复杂系统的行为。这种技术具有很强的适用性&#xff0c;在金融建模、工程设计、物理模拟、运筹优化以…

F.费用报销【蓝桥杯】/01背包

费用报销 01背包 思路&#xff1a;f[i][j]表示前i个票据在容量为j的背包中能占的最大值。 #include<iostream> #include<algorithm> using namespace std; int day[13]{0,31,28,31,30,31,30,31,31,30,31,30,31}; int dp[1005][5005]; int s[13]; int last[1005];…

Obsidian Git 多端同步

2023年6月&#xff0c;某云笔记限制了免费用户最多同时登录 2 台设备&#xff0c;想要增加设备数量需要付费开通会员。之后我一直想找一款合适的笔记本软件&#xff0c;年底尝试了Obsidian&#xff0c;断断续续摸索了好几天终于成功了。将那时的笔记拿来分享一下。 相关地址&am…

Golang单元测试

文章目录 传统测试方法基本介绍主要缺点 单元测试基本介绍测试函数基准测试示例函数 传统测试方法 基本介绍 基本介绍 代码测试是软件开发中的一项重要实践&#xff0c;用于验证代码的正确性、可靠性和预期行为。通过代码测试&#xff0c;开发者可以发现和修复潜在的错误、确保…

Elasticsearch集群搭建学习

Elasticsearch集群聚合、集群搭建 RestClient查询所有高亮算分控制 数据聚合DSL实现Bucket聚合DSL实现Metrics聚合RestAPI实现聚合 拼音分词器如何使用拼音分词器&#xff1f;如何自定义分词器&#xff1f;拼音分词器注意事项&#xff1f; 自动补全数据同步集群搭建ES集群结构创…

HarmonyOS鸿蒙应用开发——ArkTS的“内置组件 + 样式 + 循环和条件渲染”

一、内置组件是咩&#xff1f; 学过前端的都知道&#xff0c;一个组件就是由多个组件组成的&#xff0c;一个组件也可以是多个小组件组成的&#xff0c;组件就是一些什么导航栏、底部、按钮......啥的&#xff0c;但是组件分为【自定义组件】跟【内置组件】 【自定义组件】就…

java继承使用细节二

构造器 主类是无参构造器时会默认调用 public graduate() {// TODO Auto-generated constructor stub也就是说我这里要用构造器会直接调用父类。它是默认看不到的 &#xff0c;System.out.println("graduate");} 但当主类是有参构造器如 public father_(int s,doubl…

K8S集群中Yaml文件详解

目录 一、Yaml概述 二、Yaml基本语法 三、Yaml数据结构 四、K8S资源清单描述方法 五、api资源版本标签 六、Yaml文件示例详解 1.deployment.yaml文件详解 2.Pod yaml文件详解 3.Service yaml文件详解 七、Yaml文件相关操作 1.试运行 2.生成yaml格式 3.生成json格式…

超大Sql文件切分工具SQLDumpSplitter —— 筑梦之路

官网&#xff1a;PLB PLB - SQLSplitter 用于将大型MySQL转储拆分为可独立执行的小型SQL文件。 显示100%时并不是已经处理完了&#xff0c;而是才开始 优点 软件程序小巧&#xff0c;不需要安装&#xff0c;直接点击运行就可以最厉害的是SQLDumpSplitter可以自动将结构语句&…

JVM学习-执行引擎

执行引擎 执行引擎是Java虚拟机核心组成部分之一虚拟机是一个相对于物理机的概念&#xff0c;这两种机器都有代码执行能力&#xff0c;其区别是物理机的执行引擎是直接建立在处理器、缓存、指令集和操作系统层面上的&#xff0c;而虚拟机的执行引擎是由软件自行实现的&#xf…

近临算法(个人总结版)

背景 近邻算法&#xff08;Nearest Neighbor Algorithm&#xff09;是一种基本但非常有效的分类和回归方法。最早由Fix和Hodges在1951年提出&#xff0c;经过几十年的发展和改进&#xff0c;已成为数据挖掘、模式识别和机器学习领域的重要工具。近邻算法基于相似性原则&#x…

vue源码2

vue之mustache库的机理其实是将模板字符串转化为tokens 然后再将 tokens 转化为 dom字符串&#xff0c;如下图 对于一般的将模板字符串转化为dom字符串&#xff0c;这样不能实现复杂的功能 let data {name:小王,age:18 } let templateStr <h1>我叫{{name}},我今年{{ag…