Eleventy中Alpine JS条件类绑定失效问题求助

你的问题核心在于x-data的语法格式错误以及类绑定的写法细节问题，以下是具体修正方案：

1. 修正x-data的定义格式 #

Alpine JS的x-data需要以对象字面量形式定义数据，你之前的写法缺少外层的{}，导致Alpine无法正确识别数据对象：

<!-- 错误写法 -->
<div class="flex flex-col space-y-1" x-data="today: '{{ helpers.currentDay() }}'">

<!-- 正确写法 -->
<div class="flex flex-col space-y-1" x-data="{ today: '{{ helpers.currentDay() }}' }">

2. 正确的类绑定语法 #

你尝试的两种写法都存在小问题，以下是两种可行的正确写法：

写法一：三元表达式 #

<li class="font-bold" :class="today == 'Friday' ? 'color-green' : ''">Friday</li>

注意：不要给整个三元表达式额外加引号，Alpine会直接解析内部的JS逻辑。

写法二：对象语法（多类绑定更清晰） #

<li class="font-bold" :class="{ 'color-green': today == 'Friday' }">Friday</li>

规则：键为要添加的类名，值为判断条件，条件为true时类名自动生效。

完整修正代码 #

<div class="flex flex-col space-y-1" x-data="{ today: '{{ helpers.currentDay() }}' }">
  <ul class="flex space-x-3">
    <li class="font-bold" :class="{ 'color-green': today == 'Friday' }">Friday</li>
    <li>9am - 5pm</li>
  </ul>
</div>

验证提示 #

• 查看页面源码，确认Eleventy已将helpers.currentDay()渲染为正确的星期字符串（如Friday）
• 通过Alpine开发者工具再次确认today变量的值与预期一致

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