vue实现翻牌效果正反面内容不一样

实现翻牌效果可以使用CSS3的transform属性和transition属性来实现。下面是一个简单的Vue组件示例，实现了翻牌效果：

<template>
  <div class="flip-card" :class="{ flipped: flipped }" @click="flipCard">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <slot name="front"></slot>
      </div>
      <div class="flip-card-back">
        <slot name="back"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flipped: false,
    };
  },
  methods: {
    flipCard() {
      this.flipped = !this.flipped;
    },
  },
};
</script>

<style>
.flip-card {
  position: relative;
  width: 200px;
  height: 200px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
</style>

在这个组件中，使用了一个div元素作为翻牌的容器，内部包含两个div元素作为正反面。使用了一个flipped属性来控制翻牌的状态，点击容器时会切换翻牌状态。CSS样式中，使用了transform属性来实现3D旋转，transition属性来控制过渡效果。在正反面div元素中，使用了backface-visibility属性来控制背面的可见性。

在需要使用翻牌效果的地方，可以像下面这样使用组件：

<flip-card>
  <template v-slot:front>
    <div>正面内容</div>
  </template>
  <template v-slot:back>
    <div>反面内容</div>
  </template>
</flip-card>

其中，使用了Vue的插槽功能来传递正反面内容。在组件中，使用了slot元素来定义插槽，并且使用了v-slot指令来指定插槽的名称。