实现选项卡的切换选中效果。点击某一项的时候，当前tab高亮，同时下面的内容会进行相应的切换。

先来做选中高亮的效果

找到tab组件，这里是我们循环的每一个元素

绑定一个点击事件

注册事件，在methods内

我们需要知道我们点击的是第几个元素，index索引和当前点击的对象都要传过来。

log输出下这两个元素

当前点击的索引是0.

localhost:8080/#/pages/tabbar/index/index
Elements
375x667
Console
Sources
FiIlt
top
ob:observer
unl-OPO.WUO
人工智能移白
前嫌开发
后端开发
职场生活

    ![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602340616220-528b33be-503c-4fc5-b437-7334a3074642.png "image.png")                         <br />点击的元素对象。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602340637510-7472369d-2342-442e-8977-41abfae3673b.png#align=left&display=inline&height=203&margin=%5Bobject%20Object%5D&name=image.png&originHeight=405&originWidth=1110&size=224171&status=done&style=none&width=555)<br />让元素发生高亮。动态的绑定一个类。给他声明一个active的类。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602340685356-7ec38345-45c9-4d96-a0d8-e843849c5959.png#align=left&display=inline&height=78&margin=%5Bobject%20Object%5D&name=image.png&originHeight=155&originWidth=919&size=167844&status=done&style=none&width=459.5)<br />定义下标选中的索引变量。默认是0.<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602341090238-2f5fdd6a-29fa-4f20-9931-86731df96379.png#align=left&display=inline&height=99&margin=%5Bobject%20Object%5D&name=image.png&originHeight=197&originWidth=625&size=53588&status=done&style=none&width=312.5)<br />当变量的值为当前的索引值的时候。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602341104817-ba31ce20-04e8-4580-bbd9-29cbf9166ac3.png#align=left&display=inline&height=145&margin=%5Bobject%20Object%5D&name=image.png&originHeight=290&originWidth=1001&size=265022&status=done&style=none&width=500.5)<br />让它选中的样式为 定义的变量的颜色<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602341132956-4a0fa94a-6d85-4225-bbb2-0eb8cfe008b7.png#align=left&display=inline&height=252&margin=%5Bobject%20Object%5D&name=image.png&originHeight=504&originWidth=962&size=248129&status=done&style=none&width=481)<br />这样高亮就实现了<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1602341209313-6ac80f5e-97ba-4d98-8fcd-57833ff94723.png#align=left&display=inline&height=171&margin=%5Bobject%20Object%5D&name=image.png&originHeight=342&originWidth=940&size=124472&status=done&style=none&width=470)