Alpine JS多条件类绑定问题：逗号分隔仅首个条件生效

你当前用逗号分隔多个条件的写法不符合Vue的:class绑定规则，所以只有第一个条件生效。下面给你两种正确的实现方式：

方式一：数组语法 #

把每个条件表达式放到数组中，数组的每个元素都会被解析并应用对应的类：

:class="[showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain', showDetail === true ? 'rotate-180' : '']"

当showMenu为true时，添加bg-chevron类，否则添加bg-chevron-blue bg-contain；同时showDetail为true时，添加rotate-180类，否则不添加。

方式二：对象语法 #

用对象键值对的方式定义类和对应的触发条件，可读性更强：

:class="{
  'bg-chevron': showMenu,
  'bg-chevron-blue bg-contain': !showMenu,
  'rotate-180': showDetail
}"

• 当showMenu为true时，绑定bg-chevron类；为false时绑定bg-chevron-blue bg-contain类
• 当showDetail为true时，绑定rotate-180类

两种方式都能实现你要的效果，对象语法在类较多时更清晰，数组语法适合快速实现简单的条件切换。

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