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

【问题标题】：Style an item in a list based on its property in Vuejs根据 Vuejs 中的属性为列表中的项目设置样式
【发布时间】：2017-02-20 08:04:10
【问题描述】：

我对 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}"

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

更新：

也试过这种方式：

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

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

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

【问题讨论】：

你没有样式，因为你的 CSS 没有被读取，它可能与你的构建过程有关。从模板文件中删除 CSS 并将其设为全局。

标签： vue.js vuejs2

【解决方案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>

【讨论】：

是的，我也尝试过<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle]">{{menu.name}}</li>。它没有给出任何错误，但它没有任何样式。
activeSubMenuItemStyle，如果这是 css 类的名称，您应该像字符串一样将其放在引号中。 v-bind:class 引号内的任何内容都应该是有效的 javascript 表达式，在您的情况下，它们可能被解释为未声明的变量。试试v-bind:class="[activeSubMenuItem === menu.name? 'activeSubMenuItemStyle':'subMenuItemStyle']"
Kakar - 请把 jsfiddle 和你的代码放在一起，让我们帮助你