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

Question

我是 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 template syntax error:

invalid expression: v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}"

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

更新：

也试过这种方法：

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

并将 activeSubMenuItemStyle 和 subMenuItemStyle 添加到具有样式属性的数据中。

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

Answer 1

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

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

此更正后应该可以工作。

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

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

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

Style an item in a list based on its property in Vuejs

vue.js

vuejs2

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

Style an item in a list based on its property in Vuejs

vue.js

vuejs2

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