亲测很实用：v-show实现tab切换

最新推荐文章于 2023-07-21 11:21:14 发布
最新推荐文章于 2023-07-21 11:21:14 发布
阅读量1.9k 收藏 10
点赞数 2
分类专栏： vue教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k912120/article/details/113185297
版权
本文介绍如何在项目中利用v-show指令实现实时内容切换，并同步更新按钮样式、图标和标题。通过示例代码和效果图，展示了不依赖特定样式也能工作的基本功能。
摘要由CSDN通过智能技术生成

项目需求：实现内容切换的同时，按钮样式，模块对应的图标和标题都要跟着变化。

我的样式是之前写好的，请看效果即可，具体样式根据自己的需求去写。

对应代码如下：

<template>
    <div class="FillFluidReal-subject">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
				<i v-show="switchBtnTab == 0" class="iconfont iconshijian1"></i>
				<i v-show="switchBtnTab == 1" class="iconfont iconzhexiantongji"></i>
				<i v-show="switchBtnTab == 2" class="iconfont iconicon_function_BOMjiegou"></i>
				<i v-show="switchBtnTab == 3" class="iconfont iconxitong1"></i>
				<span class="cardTitle">
				  {
  {title}}
				</span>
               <div type="text" class
最低0.47元/天 解锁文章
安康全是山
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习日记——Vue2作业的知识点（时间、文字渐变、Tab栏切换、v-show、子传父$emit 、滚动条样式）
weixin_59820248的博客
12-07 916
时间、文字渐变、Tab栏切换、v-show、子传父$emit、滚动条样式
【Vue】`v-show` 指令详解：高效控制元素显示与隐藏的实用指南
最新发布
lph159的博客
07-19 1338
v-show是 Vue.js 提供的用于显示和隐藏元素的指令。与v-if不同，v-show通过切换元素的display样式来控制其显示或隐藏，而不是对元素进行销毁和重建。v-show的基本语法如下：
选项卡切换功能 v-show的使用
zds456的博客
11-17 2114
&lt;template&gt; &lt;div class="loveToo"&gt; &lt;div class="loveTooTitle"&gt; &lt;p&gt; &lt;span @click="num=0" &gt;猜你喜欢&lt;/span&gt; &lt;span @c
v-show、v-on、实现图片切换
weixin_44239550的博客
12-18 227
代码；
vue中的tab切换（v-show,v-if）
fenghui187的博客
04-18 8517
今天在用vue写tab切换的时候遇到了一个小坑，就是：不同的选项对应的列表的渲染我用的是v-show进行判断，结果发现虽然选项见得列表切换成功了但是列表的渲染样式却出现了一场异常，
Vue 常用指令 标签元素显示切换 v-show、v-if
小楼一夜听春雨，深巷明朝卖杏花
07-21 712
如果元素的显示条件更加复杂，那么还支持一些表达式，比如有age属性，图片需要age满足某些属性才可以显示，比如大于18岁，那么只需要写上大于等于18就行了，最终都会=解析为布尔值。v-show后面的值一般是定义在vue实例当中的数据，这样就不是写死固定了。v-show指令的作用是根据后面表达式的真假，让元素显示或者隐藏。有哪些情况需要切换元素的显示？比如广告，或者遮罩层。如果false那么图片就不会显示。
使用vue实现简易tab切换的功能
brilliantSt的博客
05-07 1131
tab切换，就是点击上面的标题，下面的内容随之发生改变。有两种基本实现思路。 1.通过 v-if 或者 v-show 来控制显示和隐藏 <template> <div class="tab"> <header> <span @click="index=0">历史</span> &nbsp;&nbsp;&nbsp; <span @click="index=1">文化&
uniapp 中tab切换多个单页面跳转v-if 和 click点击事件配合web页面也适用
m0_49714202的博客
05-21 1388
<template> <view class="page"> <view class="content flex" > <!-- D --> <view class="left" > <view class="left_title" @click="linkA()"> A标题 </view> <view class="left_txt" v-if="type
几种tab切换详解
08-31
4. **Vue.js, React, Angular等框架**：在现代前端框架中，可以利用数据绑定和组件化特性轻松实现Tab切换，例如Vue.js的`v-for`指令和`v-show`或`v-if`指令，React的`state`和`props`等。 每种实现方式都有其适用...
JS美食文字内容TAB切换代码
06-24
在JavaScript的世界里，实现各种交互效果是常见的需求之一，其中“TAB切换”是一个经典而实用的设计元素。在本文中，我们将深入探讨如何使用Vue.js框架来实现一个美食配方的“文字内容TAB切换”功能，这将使用户在...
vue中tab选项卡的实现思路
12-11
`v-for`指令用于遍历选项卡标题（`list`）和内容（`tabContents`），同时使用`:class`和`v-show`指令根据`selectedTab`的值来切换样式和内容的显示。 总的来说，实现Vue选项卡的关键在于理解Vue的数据绑定和响应式...
vue中v-if/v-show 简单源码简单实现
SK_study的博客
09-23 1183
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
vue中如何实现tab切换功能？
weixin_57550930的博客
09-29 4744
一、v-show控制内容切换 1）简单版原理：用点击事件改变num值作为开关，控制tab样式和内容显示隐藏。 2）数据渲染原理：主要利用v-for绑定的index来控制，跟上面差不多。 二、组件切换。 知识点主要是vue中is的特性，和keep-alive缓存。 三、路由切换。（对地址栏和数据请求友好） 通过router-link实现。 2、vue中keep-alive 实现标签页组件缓存 在做管理系统的时候，有时候需要实现类似浏览器标签页效果： 。打开新页面时插入新的标签页 。切换标签页时缓存组
元素的隐藏和显示（v-show指令)
热门推荐
01-19 4万+
除了click单击事件，还有mouseover，mouseover等鼠标事件。 dbclick双击事件。v-on:click/mouseover/mouseover/mousedown/dbclick/...v-show指令v-show="true/false" 控制元素显示/隐藏示例代码：<!DOCTYPE html> <html> <head> <title></title>
vue自定义element-ui日期季度组件
月影神社
12-06 3272
下图为效果图，众所周知element-ui没有季度组件，但项目上也经常会用到，需要我们自行开发。 1.在components里新建组件文件（名称自定义） 2.直接贴完整代码。(可拷贝直接用) <template> <el-form> <el-form-item> <mark class="_mark" v-show="showSeason" @click.stop=...
Vue03_Vue基本指令2/3——显示切换、属性绑定（v-show/v-if/v-bind）
linxwx的博客
02-11 1499
一、v-show 根据表达式的真假，切换元素的显示和隐藏； 二、v-if 根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）； 三、v-bind 为元素绑定属性，v-bind: 属性名，简写 : 属性名
Vue 中 el-tab-pane组件 使用v-show不生效问题
Aren的博客
07-06 3209
Vue 中 el-tab-pane 使用v-show不生效问题 在开发中遇到一个需求，需要根据是否有权限来显示和隐藏 tab页，一开始想使用v-if 来做到隐藏和显示 可是遇到了两个问题 父组件有部分依赖了子组件的值，所以需要组件的refs 里有值，但是由于v-if的惰性，可能还没有出现 ，在computed中已经开始访问 子组件里 的属性了，这时候就会报错 由于会频繁的需要展示和隐藏 这个tab，这时候v-if就会导致对于性能造成不必要的浪费 于是转而使用v-show 却发现无论变量如何改变都不会
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值