使用vuejs 2切換.active類

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那么將應用“active”類。

您必須在名為isActive的數據對象中設置屬性，並使用javascript對其進行切換。 如果它是真的，它將適用於你的類，當它是假的，它不會。