vue或者uniapp有哪些API可以达到原生JS动态绑定css样式的效果？

Question

原生JS中的一个业务逻辑如下：
点击li列表，对应的卡牌翻转过来，即：
每个li绑定一个点击事件，然后翻转

需求：让这段逻辑在vue或者uniapp项目中实现

Answer 1

创建一个名为Card的组件，用于表示每个卡片：

<template>
  <div class="card" :class="{ flipped: isFlipped }" @click="flipCard">
    <div class="front">正面</div>
    <div class="back">背面</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false, // 卡片是否翻转
    };
  },
  methods: {
    flipCard() {
      this.isFlipped = !this.isFlipped;
    },
  },
};
</script>

<style scoped>
.card {
  width: 100px;
  height: 150px;
  perspective: 800px;
}

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

.card .front,
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.card .front {
  background-color: #ccc;
}

.card .back {
  background-color: #f00;
  transform: rotateY(180deg);
}
</style>

在父组件中使用Card组件，并循环生成多个卡片：

<template>
  <div>
    <Card v-for="index in cardCount" :key="index" />
  </div>
</template>

<script>
import Card from "@/components/Card.vue";

export default {
  components: {
    Card,
  },
  data() {
    return {
      cardCount: 5, // 卡片数量
    };
  },
};
</script>