根据 Vuejs 中的属性为列表中的项目设置样式 [英] Style an item in a list based on its property in Vuejs
问题描述
我对 Vuejs 很陌生，所以如果这很常见，请原谅我.但是我试图根据项目的名称是否等于另一个对象的条件来设置项目的样式.
<div id="subMenuWrapper"><ul id="subMenuList"><li v-for="子菜单项中的菜单";v-bind:class="{activeSubMenuItem === menu.name?activeSubMenuItemStyle:subMenuItemStyle}>{{menu.name}}</li></模板><脚本>导出默认{name: 'subMenuWrapper',数据() {返回 {子菜单项:[{名称:'在剧院'，},{name: '即将推出',},],activeSubMenuItem: '在剧院',}},}<风格>.activeSubMenuItemStyle {字体粗细:粗体；颜色:#e4bb23；填充:8px 0;}.subMenuItemStyle {字体粗细:粗体；颜色:#e4bb23；填充:8px 0;}</风格>
这给了我一个错误:
<块引用>Vue 模板语法错误:
- 无效表达式:v-bind:class="{activeSubMenuItem === menu.name?activeSubMenuItemStyle:subMenuItemStyle}"
如何根据属性为列表中的项目设置样式?
更新:
也试过这种方法:
并将 activeSubMenuItemStyle 和 subMenuItemStyle 添加到带有样式属性的 data 中.
这没有给出任何错误，但该项目没有样式
- 如果使用三元表达式，则需要使用不同的括号:
在此更正后应该可以工作.
尝试参考文档: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}}
I am very new to Vuejs, so please pardon me if this is something very common. But I am trying to style an item based on the condition of whether the name of the item is equal to another object.
<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>
This is giving me an error:
Vue template syntax error:
- invalid expression: v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}"
How can I style an item in a list based on its properties?
Update:
Tried this way too:
<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle]">{{menu.name}}</li>
and added the activeSubMenuItemStyle and subMenuItemStyle into the data with style properties.
This is not giving any errors, but the item has no styles
- If you are using a ternary expression, you need to use different brackets:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
Should work after this correction.
Try to refer to docs: https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax . If it won't work - let me know, I'll try to edit answer to help.
- As pet Mat comment,
<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? 'activeSubMenuItemStyle':'subMenuItemStyle']">{{menu.name}}</li>
这篇关于根据 Vuejs 中的属性为列表中的项目设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
