鍍金池/ 問答/HTML/ vue tab選項卡

vue tab選項卡

<ul>

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

</ul>
<div class="">
a頁面的內(nèi)容
</div>
<div class="">
b頁面的內(nèi)容
</div>

我看了下，大部分開發(fā)者都是循環(huán)LI，如果我寫死LI的值，怎么保持上下聯(lián)動

回答
編輯回答
慢半拍

手寫了個，可參考

    <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頁面的內(nèi)容
    </div>
    <div class=""
         v-if="this.current_tab==='tab_b'">
      b頁面的內(nèi)容
    </div>
data(){
    return {
        current_tab:'tab_a'
    }
}
2018年5月22日 06:43
編輯回答
凝雅

用這個吧

2018年9月10日 15:42