vue tab切换动态数据,vue的tab页面切换
本文主要介绍vue使用动态组件实现TAB切换效果的方法，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
问题描述
vue的动态成分是什么？
应用场景描述
实施步骤
步骤1(创建新组件并介绍注册)
步骤2(布局，上面有选项卡点击的标签，下面有组件以呈现相应的内容)步骤3(在上面写下选项卡点击的标签)步骤4(使用动态组件标签组件/)步骤5(单击选项卡组件以动态更改相应的componentId值)附上完整的代码。
问题描述
开发中经常用到tab切换的场景。当需要达到这种效果时，我们往往会想到以下几种方法来达到这种效果。
方法1使用显示：无；控制dom元素的显示和隐藏。从而实现两个选项卡的显示和隐藏。但是，如果有三个或四个选项卡要切换，这种方法是不可取的。
第二种方法是利用vue中的指令v-if或v-show实现的。这种方式可以实现，但是代码不优雅。想象一下. vue文件里一堆v-if的效果？此外，在使用v-if时，必须声明大量变量以进行标识。所以这不是一个很好的解决方案。
第三种方法是使用elementui或iview中的选项卡来切换组件。这种方式是可以的，但是有时候需要/deep/来改变风格，有点麻烦。
笔者认为使用vue的动态组件实现tab切换效果会更方便。
什么是vue的动态组件
vue的动态组件本质上是一个组件。一般来说，一个组件就是一个带有js逻辑的UI视图层。所谓动态组件，就是我们可以根据一些条件动态控制那个组件在页面某个地方的具体显示。这有点像标签开关。
应用场景描述
需求效果图
其实很简单，就是tab切换的效果。当然，在实际开发中，tab的样式效果可能会稍微复杂一些。
实现步骤
第一步（新建组件并引入注册）
首先，四个。vue文件是在components文件夹下定义的，可以用作tab开关演示的内容部分。
新建的
介绍和注册
从导入一个。/components/one ；
从导入两个。/components/two ；
从导入三个。/components/three ；
从导入四个。/组件/四个；
组件：{
一，
第二，
三，
四，
},
第二步（布局，上面放tab点击的标签，下面放组件呈现对应内容）
模板
div id=应用程序
div class=top
！-放置标签并点击标签-
/div
div class=bottom
！-放置动态组件以呈现相应的内容-
/div
/div
/模板
第三步（写好上面的tab点击标签）
//首先，我们在数据中定义一个数组cardArr来存储点击tab的数据
data() {
返回{
哪个指数：0，
卡尔达尔：[
{
ComponentName，动态组件一，
},
{
组件名，动态组件2 ，
},
{
ComponentName，动态组件三，
},
{
组件名，动态组件4 ，
},
],
};
},
//然后用v-for循环出来呈现
模板
div id=应用程序
div class=top
差异
疯狂的
:class= { highLight:which index==index }
cardArr中的v-for=(item，index)
:key=index
@click=whichIndex=index
{{ item.componentName }}
/div
/div
div class=bottom
！-放置动态组件.-
/div
/div
/模板
//因为需要有一个高亮状态，所以在开始的时候，我们默认让索引为0的为第一个高亮，用数据中定义的whichIndex和：class来实现。
//突出显示样式。高亮{
box-shadow: 0 15px 30px rgba(0，0，0，0.2)；
transform: translate3d(0，-1px，0)；
}
第四步（使用动态组件标签 component/ ）
//动态组件标签component/有一个is属性，无论是谁都可以渲染，
//这里我们先用一个变量componentId存起来，组件身份为谁，就呈现谁
div class=bottom
组件：is= componentId /组件
/div
//我们默认就让第一个第一个呈现吧，同时需要让卡片列表中的组件名和组件编号对应上，
//所以数据中应该修改成这样
data() {
返回{
哪个指数：0,
componentId:一个,//值就是我们在成分对象中注册的引入的组件的名字
卡尔达尔：[
{
组件名： 动态组件一，
componentId:一个,//要与之对应
},
{
组件名： 动态组件二，
componentId: two ，//要与之对应
},
{
组件名： 动态组件三，
componentId:三个,//要与之对应
},
{
组件名： 动态组件四，
componentId:四个,//要与之对应
},
],
};
},
第五步（点击某个tab组件，就动态更改对应componentId值即可）
模板
div id=应用程序
div class=top
差异
疯狂的
:class= { highLight:which index==index }
卡尔达尔中的v-for=(项目，索引)
:key=index
@click=
哪个索引=索引；
componentId=item.componentId
！-@点击在标签中可以写多个操作代码，以分号隔开即可-
{{ item.componentName }}
/div
/div
div class=bottom
！-保持活力缓存组件，这样的话，组件就不会被销毁，DOM就不会被重新渲染，
浏览器也就不会回流和重绘，就可以优化性能。不使用的话页面加载就会慢一点-
点火电极
组件：is= componentId /组件
/保持活力
/div
/div
/模板
完整代码附上
模板
div id=应用程序
div class=top
差异
疯狂的
:class= { highLight:which index==index }
卡尔达尔中的v-for=(项目，索引)
:key=index
@click=
哪个索引=索引；
componentId=item.componentId
{{ item.componentName }}
/div
/div
div class=bottom
点火电极
组件：is= componentId /组件
/保持活力
/div
/div
/模板
脚本
从导入一个.组件/一个；
从导入两个.组件/两个；
从导入三个./组件/三；
从导入四个。/组件/四个；
导出默认值{
组件：{
一，
第二，
三，
四，
},
data() {
返回{
哪个指数：0,
组件Id:"一个",
卡尔达尔：[
{
组件名： 动态组件一，
组件Id:"一个",
},
{
组件名： 动态组件二，
组件Id:"两个",
},
{
组件名： 动态组件三，
组件Id:"三个",
},
{
组件名： 动态组件四，
组件Id:"四个",
},
],
};
},
};
/脚本
style lang=less 范围
#app {
宽度：100%;
身高：100vh
框大小：边框-框；
填充：50px。顶部{
宽度：100%;
高度：80px
显示器：flex
justify-content:space-around；（误差中的）厘弧
宽度：20%;
高度：80px
行高：80px
文本对齐：居中；
背景色：# fff
边框：1px实心# e9e9e9
}。高亮{
box-shadow: 0 15px 30px rgba(0，0，0，0.2)；
transform: translate3d(0，-1px，0)；
}
}。底部{
边距-顶部：20px
宽度：100%;
高度：calc(100%-100px)；
边框：3px纯粉色；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}
}
/风格
以上就是某视频剪辑软件使用动态组件实现拉环切换效果的详细内容，更多关于某视频剪辑软件动态组件实现拉环切换效果的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。