Vue中tab栏切换的简单实现 Vue中tab栏切换的简单实现

一、效果展示
二、实现原理
三、css和h5的代码，获得最基本的样式

1.css
2.H5 这是没有在使用Vue书写前的样式

四、Vue部分

一、效果展示

二、实现原理主体通过绑定事件，索引的利用，v-for的数组遍历，来实现的切换效果。
具体细节看代码段的解释，根据个人所需去了解一下，更多的是入门理解其中的细思。

三、css和h5的代码，获得最基本的样式
1.css
主体的布局根据个人的喜好，这里我只进行了简单的布局。
其中也用到了浮动，和清除浮动。
主要让展现的效果好看一些。具体样式还是根据个人。

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; }

2.H5 这是没有在使用Vue书写前的样式
其中的“内容，动态，行业”被上文的display none 隐藏起来了，并不是没有内容

图片一图片二图片三
文章图片

文章图片
/div>
文章图片

文章图片

四、Vue部分填充的内容以数组的形势来给到想要给的地方，可以给每一个内容都取一个固定的id，在后续可以提高性能，currentIndex:0,是定义的一个索引，通过这个索引来绑定类名，methods定义函数，也就是方法，后续在其中来实现切换。

此段是使用Vue后的h5代码
其中使用了点击的事件绑定
v-for的数组遍历（item，index）in list .list是自己定义的数组名
【Vue中tab栏切换的简单实现】在插值表达式中获取所对应的值
通过 :class来绑定类名，是通过定义的索引来判断，如果两个索引相同，就会获得背景颜色，也会出现相对应的值，否则就。