高山JS类结合多种条件

Question

我需要绑定具有多种条件的类。

:class="showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain', showDetail === true ? 'rotate-180' : ''"

我根据Showmenu使用不同的彩色图标，它们应该根据ShowDetail旋转。我用逗号将它们分开，但只有第一个条件有效

Answer 1

对于多个类绑定，您需要使用三元条件。

[]

:class="[showMenu === true ? 'bg-chevron' : 'bg-chevron-blue bg-contain', showDetail === true ? 'rotate-180' : '']"

数组语法有效，但请注意：

Answer 2

虽然有效，但它是无证件的，因此没有正式支持的行为（与记录的对象语法不同）

• 对象语法允许绑定删除类，而数组语法则不
• 对象语法：

  <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/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>

可惜的是，数组语法是没有证件的，因为我发现它在某些情况下很有用（您可以在this

this的repo讨论中添加请求将其记录为记录）。