当前位置：首页 > VUE

vue实现表白

2026-01-07 19:49:33VUE

Vue 实现表白页面

使用 Vue 可以快速创建一个动态、交互式的表白页面。以下是一个简单的实现方案：

基础结构 创建一个 Vue 项目或单文件组件，包含以下核心部分：

<template>
  <div class="love-container">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="showHeart = !showHeart">点击这里</button>
    <transition name="fade">
      <div v-if="showHeart" class="heart">❤</div>
    </transition>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      title: '给特别的你',
      message: '这句话想对你说很久了...',
      showHeart: false
    }
  }
}
</script>

样式设计

<style scoped>
.love-container {
  text-align: center;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.heart {
  font-size: 100px;
  color: red;
  margin-top: 20px;
  animation: beat 1s infinite;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

@keyframes beat {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
</style>

进阶功能实现

照片墙功能 添加一个照片展示区域，展示精选照片：

<div class="photo-wall">
  <img 
    v-for="(photo, index) in photos" 
    :key="index" 
    :src="photo" 
    @click="showFullscreen(photo)"
  >
</div>

数据部分新增

data() {
  return {
    photos: [
      'photo1.jpg',
      'photo2.jpg',
      'photo3.jpg'
    ],
    currentPhoto: null
  }
},
methods: {
  showFullscreen(photo) {
    this.currentPhoto = photo
  }
}

倒计时功能 添加重要日子的倒计时：

vue实现表白

computed: {
  countdown() {
    const targetDate = new Date('2023-12-31')
    const now = new Date()
    const diff = targetDate - now

    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

    return `${days}天${hours}小时`
  }
}