Question

这是我的代码

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

有人可以帮助我吗？

谢谢...

Answer 1

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

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

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

Vue.js如何在索引为0时添加活动类

2 个答案: