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

最新推荐文章于 2023-07-21 11:21:14 发布

安康全是山

最新推荐文章于 2023-07-21 11:21:14 发布

阅读量1.9k

点赞数 2

分类专栏： vue教程

本文链接：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