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模板语法错误：


表达式无效：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中的属性为列表中的项目设置样式

1 个答案: