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

我的看法是这样的：

<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标记将处于活动状态

我怎么做？

使用JQuery：

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

使用Javascript：

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

可以使用循环vue.js中的变量，并使用索引检查第一个元素。用于动态应用类。这样做的正确解决方案应该是：

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

---

如果使用jquery或javascript，我可以做到。但是，如何使用vue.js 2实现它呢？什么，你想要一种vue.js特定的实现方式吗？我上次检查vue.js是用javascript编写的。这意味着，通过使用javascript版本，您可以从头开始使用，vue.js所能提供的只是我上面给您的同一个函数的包装器。vue.js所能提供的只是同一个函数的包装器，嗯……不。Vue不仅仅是一个简单的包装器。它也是强大的数据绑定和观察库。如果你想绕过它，用简单的JS做你自己的事情，那也没关系，但是首先使用Vue是没有意义的。@DanielT。我并没有说这就是全部，我说的是，对于Vue.js上面的javascript，它们的代码都是用javascript编写的，所以它们与上面的代码没有任何区别。因此，如果您尝试使用仅适用于Vue.js的解决方案，则上述特定代码将被包装在Vue.js中。我知道Vue.js还有其他好处，但是如果上面的代码就是你想要的，那么根本没有理由使用Vue.js版本。不，他要求解决方案，因为他使用的是Vue。鉴于他选择的框架，您提供的解决方案不正确。存在错误：未定义变量：国家/地区视图：C:\xampp\htdocs\myshop\resources\views\front.blade.php$从主计长处获取的国家/地区。我使用laravel框架。但我与vue合作。js@mosestoh您必须在vue实例中提供国家，以便在DOM中使用它。然后你可以删除{}，它可以是v-for=countries，索引为countries，它是一样的。看来这是行不通的。我上面的代码是视图。它不包含任何组件。v-仅适用于组件中的工作。看不见