Alpine.js :class 在第二个元素中不起作用

Question

我开始研究 Alpine.js 并试图了解它的工作原理。我有一些 html 有一个按钮可以翻转其他两个按钮的背景颜色，但切换功能不正确。

问题：按钮 2 在切换后不带 CSS class。它始终保留其初始 class。奇怪的是它只发生在背景色为蓝色时。如果我只是让两个按钮与按钮 1 相同（从红色开始然后翻转到蓝色），它们都可以正常工作！我在这里缺少什么基本的东西？

.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.6/cdn.js"></script>
<div x-data="{ colored: false}">
<button class="red" :class="{ 'blue': colored }">
    Button 1
  </button>
  <button class="blue" :class="{ 'red': colored }">
    Button 2
  </button>
  <br><br>
  <button @click="colored = ! colored">
    Flip Color
  </button>
  <p x-text="'colored: '+ colored"></p>
</div>

Answer 1

Alpine.js 不会从静态 class 属性中删除原来的 classes，所以在这个例子中你有一个 CSS 问题（.red 和 .blue class 会互相覆盖）。如果你想切换 classes，你必须使用 Alpine.js class 绑定来做到这一点：

.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.9.6/cdn.js"></script>
<div x-data="{flip: false}">
<button :class="flip ? 'blue' : 'red'">
    Button 1
  </button>
  <button :class="flip ? 'red' : 'blue'">
    Button 2
  </button>
  <br><br>
  <button @click="flip = !flip">
    Flip Color
  </button>
  <p x-text="'flipped: '+ flip"></p>
</div>

Alpine.js :class 在第二个元素中不起作用

Alpine.js :class not working in second element

html

javascript

css

alpine.js