如何在Alpine.js x-for循环中判断变量值并按条件修改CSS样式

你的原写法存在三个关键逻辑偏差：

• 把服务端模板语法（<% %> 类的后端渲染标记）直接嵌入到前端Alpine的运行时循环中，服务端渲染阶段根本无法获取循环内单个item的动态值，该段判断永远不会生效
• x-for 循环生成的所有元素绑定了同一个静态id jh-stats-neutral，DOM规范要求id全局唯一，重复id会引发元素选择、样式控制的异常
• 原代码在p标签的class属性里混入了多余的*标记，属于语法残留，会导致类名解析异常
• 外层div开标签缺失闭合的>符号，存在DOM结构语法错误

Alpine 提供了原生的响应式类绑定能力，不需要依赖其他模板语法即可完成条件样式切换，有两种常用写法：

写法1：对象语法绑定动态类（推荐） #

固定类名写在原生class属性中，需要根据条件切换的类名通过:class的对象表达式配置：

<template x-for="item in myForData" :key="item.id">
  <div 
    class="flex items-center shadow hover:bg-indigo-100 
          hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform 
          hover:scale-102 flex flex-col justify-center px-2 py-3 mt-0 bg-white border
          border-gray-300 rounded md:mb-0"
  >
    <div class="text-md">
      <p
        class="text-md font-semibold text-center text-red-600"
        :class="{
          'bg-blue-200': item.categoria?.substring(3) === 'Rec'
        }"
        x-text="item.categoria"
      ></p>
      <p
        class="text-lg text-center text-red-700"
        x-text="item.total"
      ></p>
    </div>
  </div>
</template>

写法说明：

• 对象表达式中，键名是需要动态切换的CSS类名，键值是返回布尔值的判断逻辑，当判断结果为true时，对应类名会自动挂载到元素上
• 使用可选链?.处理item.categoria为空的边界情况，避免空值调用substring引发脚本报错
• :key 建议绑定每个列表项的唯一标识字段（如item.id），不要直接绑定item本身，保证列表更新时DOM复用的稳定性

写法2：三元表达式拼接类名 #

如果习惯字符串类名的写法，可以直接在:class中通过三元判断返回需要追加的类名：

<p
  class="text-md font-semibold text-center text-red-600"
  :class="item.categoria?.substring(3) === 'Rec' ? 'bg-blue-200' : ''"
  x-text="item.categoria"
></p>

如果判断逻辑相对复杂，不要把长段判断表达式直接写在模板属性中，可以在Alpine的x-data配置中封装独立的判断函数，模板中直接调用：

// 示例x-data配置
function statsCardData() {
  return {
    myForData: [], // 你的列表数据源
    // 封装判断逻辑
    isRecCategory(categoriaVal) {
      if (!categoriaVal) return false
      return categoriaVal.substring(3) === 'Rec'
    }
  }
}

模板中即可简化调用：

:class="{ 'bg-blue-200': isRecCategory(item.categoria) }"

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