與vuejs 2

Question

切換。主動類這是我的html代碼：

<nav class="nav nav-pills"> 
          <li class="active text-center"> 
           <img class="img-responsive" src="{{ FuImg::asset('img/mantee.svg') }}" alt="Camisetas Hombre"> 
           <div> 
            <span>hombre</span> 
           </div> 
          </li> 
          <li class="text-center"> 
           <img class="img-responsive" src="{{ FuImg::asset('img/womantee.svg') }}" alt="Camisetas Mujer"> 
           <div> 
            <span>mujer</span> 
           </div> 
          </li> 
          <li class="text-center"> 
           <img class="img-responsive" src="{{ FuImg::asset('img/babytee.svg') }}" alt="Body bebé"> 
           <div> 
            <span>bebé</span> 
           </div> 
          </li> 
         </nav> 

我所需要的活動類動態在我的導航藥丸裏的物品。

如何使用vuejs 2做到這一點？

Answer 1

<li class="text-center" :class={active: isActive} > 

這基本上說，如果this.isActive === true那麼類將「活躍」將應用。

您必須在您的數據對象中設置一個名爲isActive的屬性，並使用javascript進行切換。當它是真的，它會應用你的課，當它是假的，它不會。