如何正确地将条件 class 添加到 Alpine JS x-for 模板?
How to properly add conditional class to Alpine JS x-for template?
我正在尝试遍历循环并向 4 项以上的每个元素添加条件 class,以使用 tailwindcss 进行一些响应式样式设置。
之前我在循环中添加了一些其他的 class,效果很好:
<template x-for="(card, index ) in cards" :key="index">
<div class="w-40 h-64"
x-modal="card"
:class="card.someOtherClass"
>
<div class="card-content" :id="'card-' + card.id">
</div>
</div>
</template>
但后来我需要添加条件语句来检查项目数是否超过 4。
我查看了以下先前提出的问题:
这建议使用 { 'class-name': statement }
,所以我做了以下操作:
<template x-for="(card, index ) in cards" :key="index">
<div class="w-40 h-64"
x-modal="card"
:class="[card.someOtherClass,
{'bg-green-500': index > 3 },
]"
>
<div class="card-content" :id="'card-' + card.id">
</div>
</div>
</template>
但我将此 <div class="w-40 h-64 some-other-class [object Object]">
传递给浏览器中的相关 HTML。如何从该对象中获取相关值?
要使 card.someOtherClass
成为变量 属性 名称,请将其括在方括号中。然后,将其设置为 true,以便始终将其添加到 class 列表中。
:class="{[card.someOtherClass]: true, 'bg-green-500': index > 3 }"
舔式更改样式示例:
<div x-data="{ show: false }">
<button @click="show = !show" :class="{ 'active': show }">
Toggle Button
</button>
</div>
css:
.active {
background-color: red;
}
我正在尝试遍历循环并向 4 项以上的每个元素添加条件 class,以使用 tailwindcss 进行一些响应式样式设置。
之前我在循环中添加了一些其他的 class,效果很好:
<template x-for="(card, index ) in cards" :key="index">
<div class="w-40 h-64"
x-modal="card"
:class="card.someOtherClass"
>
<div class="card-content" :id="'card-' + card.id">
</div>
</div>
</template>
但后来我需要添加条件语句来检查项目数是否超过 4。 我查看了以下先前提出的问题:
这建议使用 { 'class-name': statement }
,所以我做了以下操作:
<template x-for="(card, index ) in cards" :key="index">
<div class="w-40 h-64"
x-modal="card"
:class="[card.someOtherClass,
{'bg-green-500': index > 3 },
]"
>
<div class="card-content" :id="'card-' + card.id">
</div>
</div>
</template>
但我将此 <div class="w-40 h-64 some-other-class [object Object]">
传递给浏览器中的相关 HTML。如何从该对象中获取相关值?
要使 card.someOtherClass
成为变量 属性 名称,请将其括在方括号中。然后,将其设置为 true,以便始终将其添加到 class 列表中。
:class="{[card.someOtherClass]: true, 'bg-green-500': index > 3 }"
舔式更改样式示例:
<div x-data="{ show: false }">
<button @click="show = !show" :class="{ 'active': show }">
Toggle Button
</button>
</div>
css:
.active {
background-color: red;
}