翻转新卡片时重置旧卡片翻转

在实现卡片翻转效果时，如果你希望在翻转新卡片时重置旧卡片的翻转状态，可以使用 Vue.js 来管理卡片的状态。以下是一个完整的示例，展示如何在翻转新卡片时重置旧卡片的翻转状态。

示例

假设你有一个包含多张卡片的组件，每张卡片可以通过点击进行翻转。我们将使用 Vue.js 来管理卡片的状态，并在翻转新卡片时重置旧卡片的翻转状态。

步骤 1: 创建 Vue 组件

首先，创建一个 Vue 组件来管理卡片的状态和翻转效果。

<!DOCTYPE html>
<html>
<head>
  <title>Card Flip Example</title>
  <style>
    .card {
      width: 100px;
      height: 150px;
      perspective: 1000px;
      margin: 10px;
      display: inline-block;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    .card.flipped .card-inner {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .card-back {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-for="(card, index) in cards" :key="index" class="card" :class="{ flipped: card.flipped }" @click="flipCard(index)">
      <div class="card-inner">
        <div class="card-front">
          Front {{ index + 1 }}
        </div>
        <div class="card-back">
          Back {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        cards: [
          { flipped: false },
          { flipped: false },
          { flipped: false },
          // 你可以添加更多卡片
        ]
      },
      methods: {
        flipCard(index) {
          // 重置所有卡片的翻转状态
          this.cards.forEach((card, i) => {
            if (i !== index) {
              card.flipped = false;
            }
          });
          // 翻转当前卡片
          this.cards[index].flipped = !this.cards[index].flipped;
        }
      }
    });
  </script>
</body>
</html>

解释

HTML 结构：在 #app 容器中，我们使用 v-for 指令来循环渲染卡片。每张卡片都有一个 card 类，并根据 card.flipped 状态动态添加 flipped 类。
CSS 样式：使用 CSS 来定义卡片的样式和翻转效果。.card-inner 元素在翻转时会旋转 180 度。
Vue 实例：
- data：包含一个 cards 数组，每个卡片对象都有一个 flipped 属性来表示其翻转状态。
- methods：flipCard 方法用于翻转卡片。在翻转新卡片时，首先重置所有其他卡片的翻转状态，然后翻转当前卡片。