如果索引为0，Vue.js如何添加活动类

Posted 2023-02-22

【中文标题】如果索引为0，Vue.js如何添加活动类

【英文标题】：Vue.js how to add active class if index is 0

【发布时间】：2019-07-02 03:44:14

【问题描述】：

这是我的代码

<li v-for="(data, index) in datas" :key="data.id" class="nav-item">
  <a :href="#" :class="'nav-link '+  'active' : index === 0 "  data-toggle="tab">
    data.name
  </a>
</li>

但输出只显示这样

<a href="#" data-toggle="tab" class="nav-link [object Object]">test</a>

【参考方案1】：

您应该通过将绑定的类与未绑定的类分开来执行以下操作：

<a :href="#" class="nav-link" :class=" 'active' : index === 0 "  data-toggle="tab">
  data.name
</a>

【参考方案2】：

您可以通过使用类数组而不是通过“+”运算符连接来添加具有动态类绑定的静态类。

<li v-for="(data, index) in datas" :key="data.id" class="nav-item">
  <a :href="#" :class="[nav-link, 'active' : index === 0 ]"  data-toggle="tab">
    data.name
  </a>
</li>