当前位置：首页 > VUE

vue实现表白

2026-03-07 04:26:27VUE

以下是一个基于 Vue.js 的简单表白页面实现方案，包含动态效果和交互逻辑：

核心代码结构

<template>
  <div class="love-container">
    <h1>{{ message }}</h1>
    <button @click="showHeart = !showHeart">点击显示爱心</button>
    <transition name="fade">
      <div v-if="showHeart" class="heart"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '我喜欢你',
      showHeart: false
    }
  }
}
</script>

<style>
.love-container {
  text-align: center;
  margin-top: 100px;
}

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  margin: 30px auto;
  position: relative;
  animation: pulse 1s infinite;
}

.heart:before,
.heart:after {
  content: '';
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
}

.heart:before {
  top: -50px;
  left: 0;
}

.heart:after {
  top: 0;
  left: -50px;
}

@keyframes pulse {
  0% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.3); }
  100% { transform: rotate(45deg) scale(1); }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

功能扩展方案

添加倒计时确认

data() {
  return {
    countdown: 5,
    timer: null
  }
},
methods: {
  startCountdown() {
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      } else {
        clearInterval(this.timer)
        this.message = '我知道你也会喜欢我！'
      }
    }, 1000)
  }
}

添加烟花特效

<canvas ref="fireworks" width="800" height="600"></canvas>

<script>
export default {
  mounted() {
    this.initFireworks()
  },
  methods: {
    initFireworks() {
      const canvas = this.$refs.fireworks
      const ctx = canvas.getContext('2d')
      // 实现烟花绘制逻辑
    }
  }
}
</script>