vue版，类似于翻比分牌效果。

最新推荐文章于 2025-11-04 17:08:54 发布

原创

最新推荐文章于 2025-11-04 17:08:54 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue.js框架创建一个动态翻转效果的比分牌，通过组件化开发和CSS3动画，实现分数更新时的翻转过渡效果，适用于实时显示比赛分数的应用场景。

在这里插入图片描述

<template>
    <div :class="'bodyStyle '+(isPlay?'play':'')">
        <div class="container">
            <ul class="flip secondPlay" v-for="p in [0,1,2,3,4,5]" :key="p">
                <li :class="(activeNum[p]===0?'':'before')">
                    <!--<li v-for="n in [0,1,2,3,4,5,6,7,8,9]"-->
                    <!--    :class="(activeNum[p]===n?'active ':' ')+(beforeNum[p]===0?'before':'')">-->
                    <a href="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">0</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">0</div>
                        </div>
                    </a>

                </li>
                <li :class="(activeNum[p]!==0?'active':'')">
                    <a href="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">{
   
   {
   
   activeNum[p]}}</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">{
   
   {
   
   activeNum[p]}}</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
   
   
		name: "clock",
		data() {
   
   
			return {
   
   
				activeNum: [0, 0, 0, 0, 0, 0],
				isPlay: false
			}
		},
		methods: {