用vue3如何李洵同款爱心代码

在 Vue3 中，可以使用 `v-if` 来控制是否显示爱心，使用 `@click` 来触发爱心的动画效果。具体代码如下：

<template>
  <div>
    <i class="heart" v-if="showHeart" @click="animateHeart"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeart: false
    }
  },
  methods: {
    animateHeart() {
      this.showHeart = true;
      setTimeout(() => {
        this.showHeart = false;
      }, 1000);
    }
  }
}
</script>

<style>
.heart {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(heart.png) no-repeat;
  background-size: 100%;
  transition: transform 1s ease-in-out;
}

.heart.animate {
  transform: scale(2);
}
</style>

在上面的代码中，我们首先定义了一个 `showHeart` 的状态变量，用于控制是否显示爱心。在模板中，我们使用 `v-if` 来根据 `showHeart` 的值来显示或隐藏爱心。同时，我们给爱心绑定了一个 `@click` 事件，当用户点击爱心时，会调用 `animateHeart` 方法来触发爱心的动画效果。

在 `animateHeart` 方法中，我们首先将 `showHeart` 的值设置为 `true`，这样爱心就会显示出来。然后使用 `setTimeout` 函数来延迟 1 秒钟，等待动画效果执行完毕后再将 `showHeart` 的值设置为 `false`，这样爱心就会消失。

在样式中，我们定义了 `.heart` 类，用于设置爱心的样式。同时，我们还定义了 `.heart.animate` 类，用于设置爱心动画效果的样式。在 `animateHeart` 方法中，我们使用 `this.$nextTick` 函数来等待爱心显示出来后再给它添加 `.animate` 类，这样才能触发动画效果。