Vue实现简单选项卡

效果图

 

1.头部选项卡

点击切换下标ID 传递一个参数回去，active绑定选中样式

   <div id="app">
        <ul>
            <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
                <h1> {
  {item.title}}</h1>
            </li>
        </ul>
    </div>

2.完整HTML

默认使用V-show来切换，获取盒子下标，没有dom操作

当然，Vue官方文档也不推荐V-if和V-for同时使用

  <div id="app">
        <ul>
            <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
                <h1> {
  {item.title}