Vue中tab栏切换的简单实现
更新时间：2022年07月27日 09:27:00 作者：小余努力搬砖
本文主要介绍了Vue中tab栏切换的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、效果展示
二、实现原理
主体通过绑定事件，索引的利用，v-for的数组遍历，来实现的切换效果。
具体细节看代码段的解释，根据个人所需去了解一下，更多的是入门理解其中的细思。
三、css和h5的代码，获得最基本的样式
1.css
主体的布局根据个人的喜好，这里我只进行了简单的布局。
其中也用到了浮动，和清除浮动。
主要让展现的效果好看一些。具体样式还是根据个人。
<style>
a{
text-decoration: none;
width: 180px;
height: 30px;
line-height: 30px;
text-align: center;
color: #666;
float: left;
margin-right: 15px;
}
.nav::after{
content: '';
display: block;
clear: both;
}
.nav a{
background-color: beige;
}
.nav a.hover{
background-color: blue;
}
.nav_con div{
display: none;
}
.nav_con .center{
display: block;
}
img{
width: 570px;
}
</style>2.H5 这是没有在使用Vue书写前的样式
其中的“内容，动态，行业”被上文的display none 隐藏起来了，并不是没有内容
<div class="tab">
<div class="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hover">图片一</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >图片二</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >图片三</a>
</div>
<div class="nav_con">
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/3.jpg" alt="">/div>
<div><img src="./图片/4.jpg" alt=""></div>
</div>
</div>
四、Vue部分
填充的内容以数组的形势来给到想要给的地方，可以给每一个内容都取一个固定的id，在后续可以提高性能，currentIndex:0,是定义的一个索引，通过这个索引来绑定类名，methods定义函数，也就是方法，后续在其中来实现切换。
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:'.tab',
data:{
currentIndex:0, //定义一个索引
list:[{
id: 1,
title:'图片一',
path:'./图片/2.jpg'
},{
id: 2,
title:'图片二',
path:'./图片/3.jpg'
},{
id: 3,
title:'图片三',
path:'./图片/4.jpg'
}]},
methods:{
change(index){
vm.currentIndex = index;//通过参数获得索引
}
}
})
</script> 此段是使用Vue后的h5代码
其中使用了点击的事件绑定
v-for的数组遍历（item，index）in list .list是自己定义的数组名
在插值表达式中获取所对应的值
通过 :class来绑定类名，是通过定义的索引来判断，如果两个索引相同，就会获得背景颜色，也会出现相对应的值，否则就。
<div class="tab">
<div class="nav">
<a :class="currentIndex==index?'hover':''" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="change(index)" :key="item.id" v-for="(item,index) in list">{{item.title}}</a>
</div>
<div class="nav_con">
<div :class="currentIndex==index?'center':''" :key="item.id" v-for="(item,index) in list"><img :src="item.path" alt=""></div>
</div>
</div>到此这篇关于Vue中tab栏切换的简单实现的文章就介绍到这了,更多相关Vue tab栏切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue是目前非常流行的前端开发框架,随着技术的不断更新,我们也需要更新我们的vue项目,这篇文章主要给大家介绍了关于vue项目如何删除无用的依赖的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了Vuex 快速入门(简单易懂)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
如果,你发现自己需要在Vue中做一次强制更新,99.99%的情况,是你在某个地方做错了事,本文给大家就介绍了Vue数据变了,但页面没有变的几种情况及解决方法,并通过代码示例介绍的非常详细,需要的朋友可以参考下2024-08-08
Vue+ElementUI 封装简易PaginationSelect组件的详细步骤
这篇文章主要介绍了Vue+ElementUI 封装简易PaginationSelect组件,这里简单介绍封装的一个Pagination-Select组件几个步骤，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了详解vue 兼容IE报错解决方案，详细的介绍了几种原因及其解决方案，非常具有实用价值，需要的朋友可以参考下2018-12-12
在Vue应用中，有时我们需要实现文件预览和打印的功能，比如，我们可能需要预览并打印PDF文件、图片文件等，本文将介绍如何在Vue中实现文件预览和打印的功能，并提供相应的代码示例2023-06-06
这篇文章主要介绍了解决ant Design Search无法输入内容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue中的 nextTick 涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于 nextTick 的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下 nextTick2019-05-05
最新评论