vue tab选项卡

Question

<ul>

<li class="active">a页面</li>
<li>b页面</li>

</ul>
<div class="">
a页面的内容
</div>
<div class="">
b页面的内容
</div>

我看了下，大部分开发者都是循环LI，如果我写死LI的值，怎么保持上下联动

Answer 1

手写了个，可参考

    <ul>
      <li :class="{'active':this.current_tab==='tab_a'}"
          @click="e=>this.current_tab='tab_a'">a页面</li>
      <li :class="{'active':this.current_tab==='tab_b'}"
          @click="e=>this.current_tab='tab_b'">b页面</li>
    </ul>
    <div class=""
         v-if="this.current_tab==='tab_a'">
      a页面的内容
    </div>
    <div class=""
         v-if="this.current_tab==='tab_b'">
      b页面的内容
    </div>

data(){
    return {
        current_tab:'tab_a'
    }
}

Answer 2

用这个吧