Question

我的观点是这样的：

<ul class="nav nav-tabs nav-cat">
    @foreach($countries as $country)
        <li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $country->id }})">{{ ucfirst($country->name) }}</a></li>
    @endforeach
</ul>

我想在li标签中添加class="active"。因此，当单击选项卡时，li标签将处于活动状态

我该怎么做？

Answer 1

您可以使用v-for遍历vue.js中的变量，并使用index来检查第一个元素。使用v-bind:class动态应用类。这样做的正确解决方案应该是：

<ul class="nav nav-tabs nav-cat">
    <li v-for="(country, index) as {$countries}" role="presentation" :class="{index == 0 : 'active'}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer(country.id )">{{ ucfirst(country.name) }}</a>
    </li>
</ul>

Answer 2

使用JQuery：

$("#ID").addClass("active");

使用Javascript：

document.getElementById("ID").className += " active";

如何在vue js 2上动态添加“active”类？

2 个答案: