VUE tab面板切换伴随点击选中变色

原创

于 2020-07-20 10:23:51 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue.js应用中创建一个Tab面板，实现点击切换时选中项变色的效果。通过点击事件传递值，利用:class动态绑定CSS类实现选中状态的视觉变化，并使用v-show根据当前选中值控制右侧模块的显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：左边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>&nbsp; 个人信息
        </li>
        <li
          @click="clickCategory(2), (cur = 2)"
          :class="{ active: categoryIndex == 2 }"
        >
          <i class="iconfont iconsuo"></i>&nbsp; 账号密码
        </li>
      </ul>

<div v-show="cur == 1" class="person-msg-box">
       个人信息
</di

最低0.47元/天解锁文章

200万优质内容无限畅学

VUE tab面板切换 伴随点击选中变色

VUE tab面板切换伴随点击选中变色