Vue.js实现tab切换效果

随之长风 | Wordpress |
1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后,开始要写出一些简单的特效。
1.2 实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。
1.3 tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构

1.4 tab切换第二步写上对应的css样式

1.5tab切换第三步引入vue实现

效果图:

Vue.js实现tab切换效果
1.6tab切换效果改进与优化

(1) 以上代码看起来似乎很简单容易懂,而且效果也能实现,但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值,因此我们有必要改进一下代码的写法。

(2)利用vue提供的v-for指令遍历得到索引和值 如下所示:

感觉很棒!可以赞赏支持我们~

打赏

参与评论