Vue中为元素设置多选项条件类的语法问题求助

你的代码问题在于在:class的对象表达式里错误使用了双大括号{{}}插值——:class作为Vue的指令，内部已经处于响应式上下文，可以直接访问record这类数据，不需要额外用插值语法包裹。

修正后的代码如下：

<div :class="{
    'class-option1': record.styleOption === 'option1',
    'class-option2': record.styleOption === 'option2',
    'class-option3': record.styleOption === 'option3',
}">
</div>

另外，考虑到你的场景是record.styleOption的值和类名有直接对应关系（optionX对应class-optionX），可以用更简洁的写法避免重复判断：

<div :class="`class-option${record.styleOption}`">
</div>

这种写法的前提是record.styleOption的值只会是option1/option2/option3，如果存在其他可能值，你可以通过三元表达式或计算属性过滤，确保只应用合法类名。

内容的提问来源于stack exchange，提问作者DarkW1nter