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

vue 实现tab菜单切换

1、目标:

实现切换tab菜单,激活状态,按钮高亮,显示对应的菜单内容

2、实现

<template><div class="tan_menu"><ul class="container"><liclass="item"v-for="item in tab_menu":key="item.type":class="{ active: current_menu === item.type }"@click="selectMenu(item.type)">{{ item.label }}</li><!-- <li class="item" :class="{ actice: current_menu === 'login' }">登录</li><li class="item" :class="{ actice: current_menu === 'register' }">注册</li> --></ul><template v-if="current_menu === 'login'"><div class="login">这是--登录--内容</div></template><template v-if="current_menu === 'register'"><div class="register">这是--注册--内容</div></template></div>
</template><script>
export default {name: "TabMenu",data() {return {tab_menu: [{ type: "login", label: "登录" },{ type: "register", label: "注册" },],current_menu: "login",};},methods: {selectMenu(type) {this.current_menu = type;},},
};
</script><style lang="less" scoped>
// 清除内外边距
* {margin: 0;padding: 0;
}
.tan_menu {// margin: 20px 20px 0;.container {list-style: none;margin: 100px auto;width: 200px;height: 40px;line-height: 40px;text-align: center;display: flex;justify-content: space-around;background-color: skyblue;.item {width: 100px;cursor: pointer;&.active {background-color: pink;color: #fff;}}}.login,.register {width: 300px;height: 100px;line-height: 100px;text-align: center;border: 2px solid pink;margin: 20px auto;}
}
</style>

效果:

相关文章:

vue 实现tab菜单切换

1、目标&#xff1a; 实现切换tab菜单&#xff0c;激活状态&#xff0c;按钮高亮&#xff0c;显示对应的菜单内容 2、实现 <template><div class"tan_menu"><ul class"container"><liclass"item"v-for"item in tab…...

大数据Flink(一百二十):Flink SQL自定义函数(UDF)

文章目录 Flink SQL自定义函数&#xff08;UDF&#xff09; 一、概述 二、​​​​​​​自定义标量函数&#xff08;UDSF&#xff09; 三、​​​​​​​​​​​​​​自定义聚合函数(UDAF) 四、 ​​​​​​​​​​​​​​自定义表值函数(UDTF) Flink SQL自定义函数…...

【图像检索】基于灰度共生矩的纹理图像检索,matlab实现

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于灰度共生矩的纹理图像检索&#xff0c;用matlab实现。 一、案例背景和算法介绍 …...

【操作系统】02.深入理解操作系统

一、操作系统的定位 任何计算机系统都包含一个基本的程序集合&#xff0c;称为操作系统(OS)。笼统的理解&#xff0c;操作系统包括操作系统内核和其他程序。 由上述的宏观图其实我们就知道&#xff1a;操作系统是一款进行软硬件资源管理的软件。 二、设计操作系统的目的 操…...

【Python】探索 Errbot:多功能聊天机器人框架

不是旅行治愈了你&#xff0c;是你在路上放过了自己。 在当今的数字化时代&#xff0c;聊天机器人已成为企业与客户互动、提升工作效率和增加乐趣的重要工具。Errbot是一个高度可扩展的聊天机器人框架&#xff0c;它允许开发者使用Python轻松创建和定制机器人。本文将介绍Errb…...

Linux 调试器 GDB 使用指南

在Linux环境下开发和调试程序时&#xff0c;GNU调试器&#xff08;GDB&#xff09;是一个强大的工具。它支持多种编程语言&#xff08;如C、C、Fortran等&#xff09;&#xff0c;并且可以帮助开发人员检测、排除和修复程序中的错误。GDB能够让你在程序运行时暂停&#xff0c;查…...

MiniCPM3-4B | 笔记本电脑运行端侧大模型OpenBMB/MiniCPM3-4B-GPTQ-Int4量化版 | PyCharm环境

MiniCPM3-4B&#xff0c;轻松在笔记本电脑上运行大模型&#xff1f; 背景一、选择模型二、模型下载三、模型运行四、总结 背景 2024年9月5日&#xff0c;面壁智能发布了MiniCPM3-4B&#xff0c;面壁的测试结果声称MiniCPM3-4B表现超越 Phi-3.5-mini-instruct 和 GPT-3.5-Turbo-…...

【chromedriver编译-绕过selenium机器人检测】

有小伙伴说使用selenium没能绕过机器人检测&#xff0c;盘他。 selenium机器人检测有2种&#xff0c;一是cdp检测&#xff0c;二是webdriver特征检测。cdp检测前面的博客已写过&#xff0c;这里就提下webdriver特征检测。一、selenium简介 Selenium 是一个强大的工具&#xff…...

【JavaEE精炼宝库】HTTP | HTTPS 协议详解

文章目录 一、HTTP 简介二、HTTP 协议格式&#xff1a;2.1 抓包工具的使用&#xff1a;2.2 HTTP 请求报文格式&#xff1a;2.3 HTTP 响应报文格式&#xff1a;2.4 HTTP 协议格式总结&#xff1a; 三、HTTP 请求详解&#xff1a;3.1 刨析 URL&#xff1a;3.2 方法(method)&#…...

Go语言基础学习01

目录 Linux环境下配置安装VScode并配置Go语言开发环境工作区和GOPATH 之前学习过Go语言&#xff0c;学习的时候没有记录笔记&#xff0c;最近找了个极客时间的Go语言36讲&#xff0c;打算时间学习并记录学习过程。 自己抽空看了一点内容&#xff0c;发现这个内容对于0基础解除G…...

基于SSM+Vue+MySQL的酒店管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着旅游业的蓬勃发展&#xff0c;酒店业作为旅游产业链中的重要一环&#xff0c;面临着日益增长的客户需求和激烈的市场竞争。传统的人工酒店管理模式已难以满足高效、精准、个性化的服务要求。因此&#xff0c;开发一套基于SS…...

在WPF中保存控件内容为图片

在WPF中保存控件内容为图片 实现代码如下 1 private void SaveControlContentAsImage(FrameworkElement element,string fileName)2 {3 var render new RenderTargetBitmap((int)element.ActualWidth, (int)element.ActualHeight, 96, 96, PixelFormats…...

C#用SDK打开海康工业相机,callback取图Bitmap格式,并保存

上次写了python版本的,但是python虽好不方便发布,她带着重重的解释器有时候不方便玩耍.于是C#来了哦. C#图像一般用Bitmap表示,所以完全C#就够,别的格式可以自行想转换. 命令行哦,没界面. MVCamera.cs从MVS示例里面添加到项目中,using MvCamCtrl.NET; 就可以,不需要添加mvca…...

C语言字符学习初级优先看这个就够了

1. 字符的基本概念 在C语言中&#xff0c;字符&#xff08;char&#xff09;是一个基本的数据类型&#xff0c;用来表示单个字符。字符用单引号&#xff08; &#xff09;括起来&#xff0c;例如 a、1 等。字符在内存中实际上是以整数的形式存储的&#xff0c;即 ASCII 码。例…...

Python JSON

JSON 函数 json.dumps 语法 实例 json.loads 语法 实例 使用第三方库&#xff1a;Demjson 环境配置 JSON 函数 encode 语法 实例 decode 语法 实例 JSON 函数 使用 JSON 函数需要导入 json 库&#xff1a;import json。 函数描述json.dumps将 Python 对象编码…...

【华为杯】2024华为杯数模研赛F题 解题思路

题目 X射线脉冲星光子到达时间建模 问题背景 高速公路拥堵现象的原因众多&#xff0c;除了交通事故外&#xff0c;最典型的就是部分路段出现瓶颈现象&#xff0c;主要原因是车辆汇聚&#xff0c;而拥堵后又容易蔓延。高速公路一些特定的路段容易形成堵点&#xff0c;如匝道出…...

Object Pascal 结构化程序设计

Object Pascal 关系运算符 运算符名称等于<>不等于>大于<小于>大于等于<小于等于< (属于元素的)包含于> (属于元素的)包含in (属于元素的)属于 # Object Pascal 逻辑运算符 运算符名称含义Not逻辑非单目运算符&#xff0c;进行取反操作&#xff0c;由T…...

机器学习算法与实践_03概率论与贝叶斯算法笔记

1、概率论基础知识介绍 人工智能项目本质上是一个统计学项目&#xff0c;是通过对 样本 的分析&#xff0c;来评估/估计 总体 的情况&#xff0c;与数学知识相关联 高等数学 ——> 模型优化 概率论与数理统计 ——> 建模思想 线性代数 ——> 高性能计算 在机器学…...

如何使用Privoxy将SOCKS5代理转换为HTTP代理?

在这篇博客中&#xff0c;我将介绍如何使用Privoxy将SOCKS5代理转换为HTTP代理。我们将从下载和安装Privoxy开始&#xff0c;接着配置Privoxy&#xff0c;最后配置Windows以便浏览器使用该代理。 1. 下载并安装Privoxy 首先&#xff0c;您需要下载并安装Privoxy。您可以从Pri…...

AJAX(一)HTTP协议(请求响应报文),AJAX发送请求,请求问题处理

文章目录 一、AJAX二、HTTP协议1. 请求报文2. 响应报文 三、AJAX案例准备1. 安装node2. Express搭建服务器3. 安装nodemon实现自动重启 四、AJAX发送请求1. GET请求2. POST请求(1) 配置请求体(2) 配置请求头 3. 响应JSON数据的两种方式(1) 手动&#xff0c;JSON.parse()(2) 设置…...

酒精测试仪

简 介&#xff1a; 本文介绍了一款酒精测试仪的使用方法。测试仪开机后需等待15秒预热&#xff08;数字倒计时&#xff09;&#xff0c;预热结束后对着吹气口吹气3秒即可显示测量结果。实验表明&#xff0c;该仪器灵敏度较高&#xff1a;直接吹气显示11左右&#xff0c;不吹气显…...

探索DeepCAD:基于深度学习的CAD模型生成技术入门

探索DeepCAD&#xff1a;基于深度学习的CAD模型生成技术入门 【免费下载链接】DeepCAD code for our ICCV 2021 paper "DeepCAD: A Deep Generative Network for Computer-Aided Design Models" 项目地址: https://gitcode.com/gh_mirrors/de/DeepCAD 副标题&…...

VisionPro —— CogImageFileTool图像文件管理实战解析

1. CogImageFileTool核心功能解析 第一次接触CogImageFileTool时&#xff0c;我完全被它强大的图像管理能力震撼到了。这个工具就像工业视觉领域的"智能文件管家"&#xff0c;专门处理图像文件的读写和存储问题。想象一下&#xff0c;你每天要处理上千张生产线上的产…...

PyTorch导入报错?手把手教你解决WinError 126找不到fbgemm.dll的问题(附libomp140.dll下载)

PyTorch导入报错终极解决方案&#xff1a;WinError 126缺失fbgemm.dll的深度修复指南 当你满怀期待地准备开始PyTorch深度学习项目时&#xff0c;突然遭遇"OSError: [WinError 126] 找不到指定的模块"错误&#xff0c;这感觉就像赛车手在起跑线上发现引擎无法启动。这…...

Spring Boot项目实战:用ShardingSphere-JDBC 5.3.2搞定PostgreSQL分库分表,附完整配置流程

Spring Boot与ShardingSphere-JDBC深度整合&#xff1a;PostgreSQL分库分表实战指南 当你的应用用户量突破百万级&#xff0c;单表数据量超过千万行时&#xff0c;是否经常遇到查询响应变慢、写入性能下降的问题&#xff1f;作为经历过多次系统扩容的老兵&#xff0c;我想分享一…...

GG3M贝叶斯决策数学体系:六大核心领域落地应用与差异化壁垒

GG3M贝叶斯决策数学体系&#xff1a;六大核心领域落地应用与差异化壁垒摘要 GG3M的贝叶斯更新与决策数学体系&#xff0c;基于原创“事实层—模型层—元模型层”三层级架构&#xff0c;以系统长期反熵增演化为核心决策标尺&#xff0c;从“智能参数优化”跨越至“智慧框架迭代”…...

uboot移植实战:DDR初始化参数优化与调试指南

1. 理解DDR初始化在uboot移植中的重要性 第一次接触uboot移植时&#xff0c;我完全不明白为什么DDR初始化这么麻烦。直到有一次&#xff0c;我把开发板直接烧成砖头&#xff0c;才真正意识到这个环节有多关键。简单来说&#xff0c;DDR初始化就像是给电脑装内存条&#xff0c;但…...

从Markdown到可执行规范:Tessl Framework初探与“规范即源代码”的实践思考

从Markdown到可执行规范&#xff1a;Tessl Framework初探与“规范即源代码”的实践思考 当代码行数不再是衡量开发效率的唯一标准&#xff0c;一种全新的编程范式正在悄然兴起。想象一下&#xff0c;开发者不再需要直接编写实现细节&#xff0c;而是专注于用结构化的自然语言描…...

07-打造个性化 AI 助手

OpenClaw 第七篇:记忆系统进阶——打造个性化 AI 助手 “Memory is the treasury and guardian of all things.” — Cicero 在人工智能领域,有一个永恒的挑战:如何让 AI 记住「我是谁」、「你是谁」,以及「我们之前聊过什么」。OpenClaw 作为新一代 AI 自动化平台,构建了…...

AppSpider 7.5.025 for Windows - Web 应用程序安全测试

AppSpider 7.5.025 for Windows - Web 应用程序安全测试 Rapid7 Dynamic Application Security Testing (DAST) released March 31, 2026 请访问原文链接&#xff1a;https://sysin.org/blog/appspider/ 查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xf…...