Vue 多行自动打字机

<div id="app">
    <div class="content" v-html="show_content"></div>
</div>
<script src="https://cdn.hongfs.cn/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 需打印的内容，每一行一个值，过多会导致浏览器二次换行的
            content: [
                '中国的目标从来不是超越美国，',
                '而是不断超越自我，',
                '成为更好的中国。',
            ],
            // 需显示的内容
            show_content: '',
        },
        mounted () {
            this.handleStartShowContent();
        },
        methods: {
            // 开始显示内容
            handleStartShowContent () {
                // 把需打印的内容先合并成一个字符串，然后定时器按指定时间每次多显示一个或多个字。
                const len = this.content.join('').length;

                var i = 0;

                const t = setInterval(() => {
                    i++;

                    this.show_content = this.handleGetContent(i);

                    // 内容全部输出完成了。
                    len <= i && clearInterval(t);
                }, 100); // 100 每个字的输出速度，单位毫秒
            },
            // 显示内容处理
            handleGetContent (len) {
                // 存储需要显示的
                var value = '';

                this.content.map(item => {
                    // 长度用完就停止
                    if (len <= 0) return;

                    // 追加内容，有两种情况，内容有点短或者需要被截取。
                    value += item.length <= len ? item + '<br/>' : item.substring(0, len);

                    // 减去内容的长度，不需要关心我们最终截取了多少。
                    len -= item.length;
                });

                return value;
            },
        },
    });
</script>