vuejs，如何在v-for循环中绑定动态类

Question

在Vuejs，我想设置一个＆＃34; active＆＃34;我的导航课程。导航按照以下方式构建在v-for循环中：

<li v-for="item in arrNav" v-bind:class="{'active' : item.id }">
    <a v-link="{ path: item.id }">{{ item.title}}</a>
</li>

这里是数据：

arrNav: [{
    'title': 'Home',
    'id': 'home'
  },
  {
    'title': 'About',
    'id': 'about'
  },
  {
    'title': 'Contact',
    'id': 'contact'
  }]

这是设置＆＃34;有效＆＃34;每一课都上课。我假设这是因为item.id返回true，因为它是一个字符串。有没有办法将item.id计算为变量名？

Answer 1

这样做更优雅，因为vue-router默认提供此功能。如果要将类提供给导航元素的父项，可以使用v-link-active：

<li v-for="item in arrNav" v-link-active>
    <a v-link="{ path: item.id }">{{ item.title}}</a>
</li>

这将为li项目提供v-link-active课程。请查看vue-router文档中的此页面。