TypeError: unsupported operand type(s) for ^: 'float' and 'float'

以下是一个简单的 Vue 爱心网页代码示例：

<template>
  <div class="heart-container">
    <div class="heart" :class="{ 'active': isClicked }" @click="handleClick"></div>
  </div>
</template>

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

<style scoped>
.heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.heart {
  width: 50px;
  height: 50px;
  background-color: #ff7eb9;
  border-radius: 50%;
  transform: rotate(45deg);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.heart.active {
  transform: scale(1.2) rotate(45deg);
  background-color: #ff4d6b;
  box-shadow: 0 0 10px #ff4d6b;
}
</style>

这个示例中，我们创建了一个爱心组件，这个组件包含一个 div 元素，用来包裹爱心的元素。在 div 元素中，我们使用了一个 div 元素来表示爱心。我们使用了 Vue 绑定语法来绑定一个 isClicked 变量到这个 div 元素的 class 中，以实现点击后爱心变色的效果。

在组件的 methods 中，我们定义了一个 handleClick 方法，用来处理点击事件。这个方法会在每次点击时将 isClicked 的值取反，以实现每次点击爱心都会改变颜色的效果。

在组件的样式中，我们使用了 flex 布局来将爱心元素居中显示。我们使用了 transform 属性来将爱心旋转并缩放，以实现爱心的形状。我们使用了 background-color 属性来设置爱心的颜色，并使用 box-shadow 属性来实现点击后的阴影效果。