Question

我正在寻找这样的插件或使vue js倒计时的方法：

vue countdown image

注意：我正在将xd转换为vue应用。

您的建议是什么？

Answer 1

您可以在此链接中使用一些基本代码，并通过vuejs处理兼容的代码。

demo code pen

我找不到vuejs的任何演示

但是首先，您应该为此反应创建一个简单的动画，然后添加纯代码计时器。 after that u must merge CSS animation and js timer together.

Answer 2

按照Vue倒计时功能（例如10秒钟），其工作方式如下：

<template>
   <div>{{ countdown }}</div>
</template>

<script>
    export default {
        data() {
         countdown: 10
        },
        methods: {
        countSeconds() {
                        if(this.countdown> 0) {
                            setTimeout(() => {
                                this.countdown-= 1
                                this.countSeconds()
                            }, 500);
                        }
                    }
        },
        created() {
            this.countSeconds();
        }
    }
 </script>

您还可以根据需要动态地简化10秒！此外，根据动画，您可以随意使用转场或其他任何根据您的意愿的方法！

如何使用动画创建vueJS倒计时？

2 个答案: