效果如图: 左边Tab列表点击选中有变色效果,对应切换右边模块
思路:点击事件传值 拿到对应值根据对应值 :class 给相应的li绑定上点击效果的css类名
v-show通过判断拿到的cur的值 对应隐藏或展现(display:none)
HTML
<ul class="list-box">
<li
@click="clickCategory(1), (cur = 1)"
:class="{ active: categoryIndex == 1 }"
>
<i class="iconfont iconFrame"></i> 个人信息
</li>
<li
@click="clickCategory(2), (cur = 2)"
:class="{ active: categoryIndex == 2 }"
>
<i class="iconfont iconsuo"></i> 账号密码
</li>
</ul>