英文:
Conditional classes on elements in Vue where we may have multiple options
问题
<div :class="{
'class-option1': record.styleOption === 'option1',
'class-option2': record.styleOption === 'option2',
'class-option3': record.styleOption === 'option3'
}">
英文:
I'm trying to add conditional classes to a div in Vue where I can have up to 3 class options based on the value of the bound data.
I think I need something like what I have below, but obviously the syntax is incorrect.
So in the example 'class-option1' is the class I'd like to apply where the bound data {{record.styleOption}} is equal to the value 'option1', and so on.
Can anyone suggest what needs changed?
<div :class="{
'class-option1': {{record.styleOption}} === 'option1',
'class-option2': {{record.styleOption}}=== 'option2',
'class-option3': {{record.styleOption}}=== 'option3',
}">
答案1
得分: 1
只需移除绑定数据周围的 {{ }}：
<div :class="{
'class-option1': record.styleOption === 'option1',
'class-option2': record.styleOption === 'option2',
'class-option3': record.styleOption === 'option3',
}">
英文:
just remove {{ }} arround the bound data:
<div :class="{
'class-option1': record.styleOption === 'option1',
'class-option2': record.styleOption === 'option2',
'class-option3': record.styleOption === 'option3',
}">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论