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

最新推荐文章于 2023-05-04 20:02:47 发布

CJW-Coder

最新推荐文章于 2023-05-04 20:02:47 发布

阅读量1k

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42143163/article/details/103636905

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述

<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],<