有条件地将类应用于列表中的特定项目 Vue.js 3.0答案

【问题标题】：Apply class conditionally to specific item in a list Vue.js 3.0有条件地将类应用于列表中的特定项目 Vue.js 3.0
【发布时间】：2021-03-26 14:48:27
【问题描述】：

我想有条件地禁用 Vue.js 中自动呈现列表中的特定链接，这是我目前拥有的：

<ul>
  <li class="nav-item" :key="id" v-for="(item, id) in listOfItems">
    <a class="nav-link" :id="item.id">{{ item.name }}</a>
  </li>
</ul>

基本上在某些情况下，我想禁用来自listOfItems 的链接之一，如果此条件不再适用，则将其恢复为活动状态。如果我绑定条件类，它适用于列表中的每个项目：

:class="[someCondition = 'something' ? 'disabled' : '']"

如果条件为真，如何在此条件下指定究竟应该禁用哪个项目？

【问题讨论】：

【解决方案1】：

您可以在任何要检查的项目上添加一个附加属性：

listOfItems: [
  { id: 1, name: 'name1', checkme: true },
  { id: 2, name: 'name2', checkme: false },
]

然后，使用对象绑定语法和===，因为您正在进行比较：

:class="{ disabled: item.checkme && someCondition === 'something' }"

【讨论】：