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

Posted 2023-02-23

【中文标题】如何在 vue js 2 上动态添加“活动”类？

【英文标题】：How do I add 'active' class dynamically on vue js 2?

【发布时间】：2017-07-09 03:57:07

【问题描述】：

我的看法是这样的：

<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 标签将被激活

我该怎么做？

【参考方案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>

【讨论】：

存在错误：Undefined variable: country (View: C:\xampp\htdocs\myshop\resources\views\front.blade.php)。 $countries 取自控制器。我使用 laravel 框架。但我与 vue.js 合作

@mosestoh 你必须让 countries 在 vue 实例中可用，这样你才能在 DOM 中使用它。你可以删除，它可以只是v-for="(countries, index) as country"

是一样的。似乎它在视图中不起作用。我上面的代码是视图。它没有组件。 v-for 仅适用于组件。不在视图中

【参考方案2】：

使用 JQuery：

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

使用 Javascript：

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

【讨论】：

如果使用 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，他要求提供解决方案。鉴于他选择的框架，您提供了一个不正确的解决方案。