如何在 vue js 2 上動態添加“活動”類？

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";