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

GLM-4v-9b效果展示:直播带货截图→话术分析+转化点提炼

GLM-4v-9b效果展示&#xff1a;直播带货截图→话术分析转化点提炼 1. 模型能力概览 GLM-4v-9b是智谱AI在2024年开源的多模态视觉-语言模型&#xff0c;拥有90亿参数。这个模型最大的特点是能够同时理解图片和文字&#xff0c;支持中英文多轮对话&#xff0c;在11201120高分辨…...

超导电路阵列实验方案 V1.0桌面量子引力实验(自指动力学与类时空关联涌现)

超导电路阵列实验方案 V1.0 桌面量子引力实验&#xff08;自指动力学与类时空关联涌现&#xff09; 方案编号&#xff1a;SR-EXP-QG-001 版本&#xff1a;V1.0 一、核心科学目标 1. 科学目标 在一维/二维超导量子比特阵列中&#xff0c;引入全局量子态测量 实时反馈构建强自指…...

实战指南:基于快马平台与Playwright打造自动化的网站内容监测应用

今天想和大家分享一个非常实用的自动化监测方案——基于Playwright和InsCode(快马)平台搭建的新闻网站更新监测系统。这个项目特别适合需要追踪行业动态或竞品资讯的朋友&#xff0c;整个过程不需要复杂的服务器配置&#xff0c;用快马平台就能轻松实现部署和定时运行。 项目背…...

基于IEEE39节点系统的风力发电机组并网改造与稳定性研究

基于IEEE39节点系统的风力发电机组并网改造与稳定性研究 摘要 随着可再生能源在电力系统中占比的不断提升,风电并网技术已成为电力系统领域的研究热点。本文针对IEEE39节点标准测试系统,将其工作频率从60Hz改造为50Hz,并将30、32、34、37号节点的同步发电机分别替换为不同…...

软件测试之压力测试总结

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、什么是压力测试软件测试中&#xff1a;压力测试&#xff08;Stress Test&#xff09;&#xff0c;也称为强度测试、负载测试。压力测试是模拟实际应用的软硬件…...

手把手教你用UML用例图梳理业务流程(附真实项目案例)

实战指南&#xff1a;用UML用例图重构电商订单系统业务流程 1. 为什么用例图是需求分析的基石 在软件开发的混沌初期&#xff0c;当产品经理、开发者和业务方还在用各自的语言描述需求时&#xff0c;UML用例图就像一盏明灯&#xff0c;它能跨越专业术语的鸿沟&#xff0c;用可视…...

宇树机器狗Go2仿真入门:Gazebo环境下Gmapping建图全流程(附避坑指南)

宇树机器狗Go2仿真实战&#xff1a;Gazebo环境下的Gmapping建图与避坑指南 当四足机器人遇上SLAM技术&#xff0c;会碰撞出怎样的火花&#xff1f;宇树科技&#xff08;Unitree&#xff09;推出的Go2机器狗凭借其灵活的机动性和开源控制系统&#xff0c;已成为机器人开发者的热…...

避坑指南:雅特力AT32F403A V2库在Keil5中的常见配置错误及解决方法

雅特力AT32F403A V2库在Keil5中的高频配置问题与实战修复方案 当国产MCU逐渐成为嵌入式开发的新选择&#xff0c;雅特力AT32F403A凭借其出色的性价比获得了不少工程师的青睐。但在实际开发中&#xff0c;特别是在Keil5环境下使用V2库时&#xff0c;不少开发者都会遇到一些看似简…...

Ostrakon-VL像素终端效果展示:8-bit风格UI下高精度OCR识别动图

Ostrakon-VL像素终端效果展示&#xff1a;8-bit风格UI下高精度OCR识别动图 1. 像素特工终端概览 在零售与餐饮行业的数字化转型浪潮中&#xff0c;我们开发了这款基于Ostrakon-VL-8B多模态大模型的Web交互终端。与传统工业级UI不同&#xff0c;这款终端采用了充满活力的8-bit…...

3个核心技巧:快速掌握免费在线PPT编辑器PPTist的创作秘诀

3个核心技巧&#xff1a;快速掌握免费在线PPT编辑器PPTist的创作秘诀 【免费下载链接】PPTist PowerPoint-ist&#xff08;/pauəpɔintist/&#xff09;, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing…...