英文:
alpine js class binding with multiple condition
问题
我需要根据多个条件绑定类。
:class="showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain', showDetail === true ? 'rotate-180' : ''"
我根据showMenu使用不同颜色的图标，并根据showDetail旋转它们。我使用逗号分隔它们，但只有第一个条件起作用。
英文:
I need to bind classes with multiple condition.
:class="showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain', showDetail === true ? 'rotate-180' : ''"
I use different colored icons according to showMenu and they should rotate according to showDetail. I seperate them with comma but only first condition works
答案1
得分: 2
在多类绑定中，您需要在[]中使用三元条件。
:class="[
showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain',
showDetail === true ? 'rotate-180' : ''
]"
请注意，这是HTML代码的一部分，所以不需要额外的翻译。
英文:
For multiple class bindings you need to use ternary conditions with in []
:class="[showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain', showDetail === true ? 'rotate-180' : '']"
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js"></script>
<div x-data="{showMenu:true, showDetail: true}">
<label for="name" :class="[(showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain'),(showDetail === true ? 'rotate-180' : '')]" >Name:</label>
<input id="name" type="text" x-model="name" />
<p x-text="name">
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论