如何在Qwik模板中条件性添加CSS类？

我有一个表单<input>字段，希望在HTML表单出现验证错误时，替换类名让input框边框变为红色。目前已经能正常显示验证错误消息，但还想同步给input字段添加红色边框来突出显示。

原代码如下：

<div>
    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
    <input type="text" name="name" id="name"
        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Write your name" />
    {
        action.value?.failed && <p class="mt-2 text-sm text-red-600 dark:text-red-500">{action.value.fieldErrors?.name}</p>
    }
</div>

要求默认保留border-gray-300类，仅在出现验证错误时替换为border-red-300。

实现方案 #

通过动态拼接类名数组的方式，结合验证状态的条件判断来切换边框类：

• 将固定不变的类名放入数组的第一个元素
• 第二个元素通过三元表达式判断：当action.value?.failed为true且对应字段存在错误时，使用border-red-300，否则使用默认的border-gray-300

优化后的可用代码 #

<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
<input type="text" name="name" id="name"
    class={['bg-gray-50 border text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', (action.value?.failed && action.value.fieldErrors?.name) ? 'border-red-300' : 'border-gray-300']} placeholder="Write your name" />
{
    action.value?.failed && <p class="mt-2 text-sm text-red-600 dark:text-red-500">{action.value.fieldErrors?.name}</p>
}
</div>

如果想让代码更简洁易维护，可以把判断条件提取为变量：

const hasNameError = action.value?.failed && action.value.fieldErrors?.name;

然后在类名中直接使用变量：

class={[/* 固定类名 */, hasNameError ? 'border-red-300' : 'border-gray-300']}

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