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

Vue常见的实现tab切换的两种方法

news 2025/9/6 9:58:31

目录

方法一：事件绑定+属性绑定

效果图

 完整代码

方法二：属性绑定+ 动态组件 component标签

效果图

完整代码 

方法一：事件绑定+属性绑定

效果图

 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab</title><style>*{margin: 0;padding: 0;}h2{width: 500px;height: 400px;background: #9fe4d9;text-align: center;line-height: 400px;display: none;}#app .kk{width: 500px;height: 50px;display: flex;justify-content: space-between;}#app{width: 500px;margin: 50px auto;}span{flex: 1;text-align: center;line-height: 50px;background: #ccc;}.on{background: pink;}#app .onn{display: block;}</style>
</head>
<body><div id="app"><div class="kk"><span :class =" n==1 && 'on'" @click.self="n=1">1</span><span :class =" n==2 && 'on'" @click.self="n=2">2</span><span :class =" n==3 && 'on'" @click.self="n=3">3</span><span :class =" n==4 && 'on'" @click.self="n=4">4</span><span :class =" n==5 && 'on'" @click.self="n=5">5</span></div><h2 :class =" n==1 && 'onn'">1</h2><h2 :class =" n==2 && 'onn'">2</h2><h2 :class =" n==3 && 'onn'">3</h2><h2 :class =" n==4 && 'onn'">4</h2><h2 :class =" n==5 && 'onn'">5</h2></div>
</body>
</html>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
createApp({data() {return {n:1}  },methods:{},
}).mount('#app')
</script>

方法二：属性绑定+ 动态组件 component标签

            该组件具有一个is属性，is属性的值 是 要渲染组件的名字，即为is属性的值是哪一个组件名，

            component 标签就会渲染哪一个组件

            缺点：component 可以动态渲染组件的内容，但是每一个切换，都会重新渲染组件内容，降低渲染效率

            使用keep-alive 标签(组件)，可以缓存曾经渲染过的组件，从而提高渲染效率

效果图

完整代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态组件</title><style>*{margin: 0;padding: 0;}.wp{width: 440px;height: 30px;margin: 20px auto;display: flex;background: #f0f0f0;}.wp span{flex: 1;height: 30px;text-align: center;line-height: 30px;cursor: pointer;}.wp span.on{background: pink;color: #fff;}h1{width: 440px;margin: 0 auto;}</style>
</head>
<body><div id="app"><div class="wp"><span :class="num==1&&'on'" @click="num=1">水浒传</span><span :class="num==2&&'on'" @click="num=2">红楼梦</span><span :class="num==3&&'on'" @click="num=3">西游记</span><span :class="num==4&&'on'" @click="num=4">三国演义</span></div><!-- 动态组件 使用标签 component 该组件具有一个is属性，is属性的值 是 要渲染组件的名字，即为is属性的值是哪一个组件名，component 标签就会渲染哪一个组件缺点：component 可以动态渲染组件的内容，但是每一个切换，都会重新渲染组件内容，降低渲染效率使用keep-alive 标签(组件)，可以缓存曾经渲染过的组件，从而提高渲染效率--><keep-alive><component :is="'comp'+num"></component></keep-alive></div>
</body>
</html>
<script type="module">import { createApp } from './js/vue.esm-browser.js';     let comp1={template:'<h1>水浒传</h1>'}let comp2={template:'<h1>红楼梦</h1>'}let comp3={template:`<h1>西游记</h1><p>{{n}}</p><button @click = "n++">点击++</button>`,data() {return {n:100,}},}let comp4={template:'<h1>三国演义</h1>'}let aa = {template:'<h1>金瓶梅</h1>'}createApp({data() {return {num:1,}},components:{comp1,comp2,comp3,comp4,aa}}).mount('#app')
</script>

相关文章：

Vue常见的实现tab切换的两种方法

目录 方法一&#xff1a;事件绑定属性绑定 效果图 完整代码 方法二&#xff1a;属性绑定 动态组件 component标签 效果图 完整代码 方法一&#xff1a;事件绑定属性绑定 效果图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta c…...

编程日记 2023/11/27 5:39:28

React16中打印事件对象取不到值的现象及其原因分析

React16中打印事件对象取不到值的现象及其原因分析 一、背景 在最近的开发过程中&#xff0c;遇到了一个看起来匪夷所思的问题❓&#xff1a; <Inputplaceholder"请输入"onChange{(e) > {console.log(e:, e)}}onKeyDown{handleKeyDown} />此时按理来说我…...

编程日记 2023/11/27 5:38:25

绝对干货-讲讲设计模式之创建型设计模式的本质

创建型模式&#xff08;Creational Patterns&#xff09;&#xff1a;创建型模式关注对象的创建机制&#xff0c;包括了如何实例化一个对象或者一组对象的方法。Java中的创建型模式有&#xff1a;单例模式&#xff08;Singleton Pattern&#xff09;、工厂模式&#xff08;简单…...

编程日记 2023/11/27 5:36:23

机器人规划算法——movebase导航框架源码分析

这里对MoveBase类的类成员进行了声明&#xff0c;以下为比较重要的几个类成员函数。 构造函数 MoveBase::MoveBase | 初始化Action 控制主体 MoveBase::executeCb收到目标&#xff0c;触发全局规划线程&#xff0c;循环执行局部规划 全局规划线程 void MoveBase::planThread |…...

编程日记 2023/11/27 5:35:23

Android：Google三方库之Firebase集成详细步骤（三）

Cloud Messaging 1、清单文件配置 a、&#xff08;可选&#xff09;一项扩展 FirebaseMessagingService 的服务。除了接收通知外&#xff0c;如果您还希望在后台应用中进行消息处理&#xff0c;则必须添加此服务。例如&#xff0c;您需要在前台应用中接收通知、接收数据载荷以及…...

编程日记 2023/11/27 5:34:21

2023年中国边缘计算网关现状及发展趋势分析[图]

边缘计算网关是一种可以在设备上运行本地计算、消息通信、数据缓存等功能的工业智能网关&#xff0c;可以在无需联网的情况下实现设备的本地联动以及数据处理分析。边缘计算网关是一种连接物联网设备和云端服务的关键技术&#xff0c;它可以在设备和云端之间建立一个安全、高效…...

编程日记 2023/11/27 5:33:21

LeetCode78.子集

这道题如果用暴力法几乎是不可能解出来的&#xff0c;因为情况太复杂了&#xff0c;但是一旦用上递归回溯就会轻松很多&#xff0c;先上代码&#xff1a; class Solution {List<List<Integer>> result new ArrayList<List<Integer>>();List<Integ…...

编程日记 2023/11/27 5:32:20

不是默认进入Linux|总是自动进入windows系统

问题描述 不是默认进入Linux系统无法主动出现boot引导自动进入windows系统 尝试无效 修复引导无效重装Grub无效重装系统无效 环境 Ubuntu 22.04 LST微星主板 解决方案 修改引导顺序&#xff1a; 开机狂按Del键&#xff0c;进入BIOS系统&#xff0c;左侧Settings 设置&…...

编程日记 2023/11/27 5:31:18

【面经八股】搜广推方向：常见面试题（二）

【面经&八股】搜广推方向：常见面试题（二） 文章目录 【面经&八股】搜广推方向：常见面试题（二）1. FTRL 是什么？(Follow The Regularized Leader)2. 梯度下降方法3. 推荐系统中常见的Embedding方法有哪些？4. Embedding与推荐系统有哪些结合5. FM 和 FFM6. FNN7. 深…...

编程日记 2023/11/27 5:30:17

机器学习与药物筛选的心得体会

机器学习在药物设计里面的应用可以说还是比较常见的&#xff0c;尤其是搞计算的都会或多或少的涉及到这块。比如国内做这块比较多的&#xff0c;浙江大学的侯廷军教授&#xff0c;北京化工大学的闫爱霞教授&#xff0c;华东理工大学的几个做模拟计算的老师&#xff0c;上海药物…...

编程日记 2023/11/27 5:28:14

初识数据结构

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 熬过了我们不想要的生活&#xf…...

编程日记 2023/11/27 5:27:12

【阿里云】图像识别 智能分类识别 增加网络控制功能点(三)

一、增加网络控制功能 实现需求TCP 心跳机制解决Soket异常断开问题 二、Linux内核提供了通过sysctl命令查看和配置TCP KeepAlive参数的方法。 查看当前系统的TCP KeepAlive参数修改TCP KeepAlive参数 三、C语言实现TCP KeepAlive功能 四、setsockopt用于设置套接字选项的系…...

编程日记 2023/11/27 5:26:12

LeetCode 统计美丽子字符串 II【质因子分解,前缀和,哈希表】困难

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/11/27 5:25:11

第一百八十一回 如何绘制阴影效果

文章目录 1. 概念介绍2. 使用方法2.1 SegmentedButton2.2 ButtonSegment 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 1. 概念介绍 我们在本章回中介绍的SegmentedButton组件是一种分段式按钮&#xff0c;它把多个按钮连接成一组显示&#xff0c;组内再对不同的按钮进…...

编程日记 2023/11/27 5:23:08

Qt5.15.2静态编译 VS2017 with static OpenSSL

几年前编译过一次Qt静态库：VS2015编译Qt5.7.0生成支持XP的静态库，再次编译，毫无压力。 一.环境 系统：Windows 10 专业版 64位 编译器：visual studio 2017 第三方工具：perl，ruby和python python用最新的3.x.x版本也是可以的 这三个工具都需要添加到环境变量，安装时勾选…...

编程日记 2023/11/27 5:21:05

AIGC（生成式AI）试用 13 -- 数据时效性

数据时效性&#xff1f; 最新的数据&#xff0c;代表最新的状态&#xff0c;使用最新的数据也应该最有说服力。 学习需要时间&#xff0c;AIGC学习并接收最新数据的效果如何&#xff1f; 问题很简单&#xff0c;如何验证&#xff1f;这个需要找点更新快的对像进行验证。…...

编程日记 2023/11/27 5:20:04

Sass的嵌套CSS 规则详细教程

文章目录 前言父选择器的标识符&群组选择器的嵌套子组合选择器和同层组合选择器&#xff1a;>、和~嵌套属性后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Sass和Less &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和…...

编程日记 2023/11/27 5:19:03

Spark---SparkCore（一）

一、术语与宽窄依赖 1、术语解释 1、Master(standalone):资源管理的主节点&#xff08;进程&#xff09; 2、Cluster Manager:在集群上获取资源的外部服务(例如&#xff1a;standalone,Mesos,Yarn) 3、Worker Node(standalone):资源管理的从节点(进程)或者说管理本机资源的…...

编程日记 2023/11/27 5:18:02

单链表原来是这样实现的！

文章目录 前言1. 链表的概念及结构1.1在链表里&#xff0c;每节“车厢”是什么样的呢&#xff1f;1.2为什么还需要指针变量来保存下⼀个节点的位置&#xff1f; 2. 单链表的实现1. 定义结构体(Seqlist)2. 打印函数(SLTPrint)小插曲&#xff0c;创建节点函数CreateNode3. 尾插函…...

编程日记 2023/11/27 5:17:00

excel一个单元格换行方法

要是在同一个单元格内输入文字输入不下的话&#xff0c;我们是可以进行同一个单元格换行设置的&#xff0c;而且换行的方法也是有很多种&#xff0c;下面我们就一起来看一下有哪些方法吧。 excel一个单元格换行方法&#xff1a; 方法一&#xff1a; 1、我们可以直接按下alte…...

编程日记 2023/11/27 5:14:59

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/9/2 19:31:47

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/8/7 21:07:39

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/9/6 7:15:41

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/9/5 14:31:01

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/8/31 18:02:53

数据库正常，但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...

编程新知 2025/7/21 8:35:44

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/9/1 9:14:27