根据 Vuejs 中的属性设置列表中项目的样式

我对 Vuejs 很陌生，所以如果这是很常见的事情，请原谅我。但我试图根据项目名称是否等于另一个对象的条件来设置项目的样式。

<template>
  <div id="subMenuWrapper">
    <ul id="subMenuList">
      <li v-for="menu in SubMenuItems" v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}">{{menu.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'subMenuWrapper',
  data() {
    return {
      SubMenuItems: [
        {
          name: 'IN THEATERS',
        },
        {
          name: 'COMING SOON',
        },
      ],
      activeSubMenuItem: 'IN THEATERS',
    }
  },
}
</script>

<style>
.activeSubMenuItemStyle {
  font-weight: bold;
  color: #e4bb23;
  padding: 8px 0;
}

.subMenuItemStyle {
  font-weight: bold;
  color: #e4bb23;
  padding: 8px 0;
}
</style>

这给了我一个错误：

Vue模板语法错误：

• 无效表达式： v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}"

如何根据列表中的项目的属性设置其样式？

Update:

也尝试过这种方式：

<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle]">{{menu.name}}</li>

并添加了activeSubMenuItemStyle and subMenuItemStyle进入data具有样式属性。

这没有给出任何错误，但该项目没有样式

1. 如果使用三元表达式，则需要使用不同的括号：

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

修正后应该可以工作。

尝试参考文档：https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax。如果它不起作用 - 请告诉我，我会尝试编辑答案以提供帮助。

2. 正如宠物垫评论，<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? 'activeSubMenuItemStyle':'subMenuItemStyle']">{{menu.name}}</li>