vue实现键盘输入动画效果

最新推荐文章于 2025-07-02 16:12:09 发布

弗兰克的天空

最新推荐文章于 2025-07-02 16:12:09 发布

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：网站前端

本文链接：https://blog.youkuaiyun.com/frank_fong/article/details/81567439

网站前端专栏收录该内容

75 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现数据动态加载的方法。通过模拟打字效果逐步显示一段关于数据历史及重要性的文字，展示了如何利用Vue的生命周期钩子和定时器实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        {{str2}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: '上古结绳而治,后世圣人易之以书契。千年来，数据始终影响着人们的生活。人类一直在探索，大数据时代来临之时使用何种工具用于改变用户利用数据的方式。',
                i: 0,
                timer: 0,
                str2: "",
            },
            methods: {
                typing() {
                    if (this.i <= this.str.length) {
                        this.str2 = this.str.slice(0, this.i++) + '_';
                        this.timer = setTimeout(() => {
                            this.typing();
                        }, 200);
                    } else {
                        clearTimeout(this.timer)
                    }
                }
            },
            mounted() {
                this.typing();
            }
        })
    </script>
</body>

</html>