使用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

apex_application.g_f0x

这基本上表示如果<li class="text-center" :class={active: isActive} > ，那么将应用“有效”类。

您必须在数据对象中设置名为isActive的属性，并使用javascript对其进行切换。如果它是真的，它将适用于你的类，当它是假的，它不会。