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

Posted 2023-02-22

【中文标题】有条件地将类应用于列表中的特定项目 Vue.js 3.0

【英文标题】：Apply class conditionally to specific item in a list 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' "