vue数据绑定思想开发常用交互效果-切换选项卡-1

说明：默认高亮显示第一个，如果用 这种会始终第一个有这个效果，

:class="{'changeBg':index===0}"

因为再切换的类会多出一个高亮类：

:class="[{'changeBg':index===0},{'changeBg':index===currentIndex}]"

 点击切换的时候第一个始终高亮

代码如下：

:class="[{'first':index===0 && onceColor},{'changeBg':index===currentIndex}]"

目的就是让第一个只高亮一次即可，那么第一次onceColor变量为true，每次点击的函数置为false

下一期预告：

模仿element ui的进度条组件Steps 交互效果