Question

您好，我尝试在vuejs上进行打字效果，这是我的代码。

我正在尝试调用setTimeout，但这正是我想要的效果。

模板：

<template>
<div>
    <span class="back" @click="goToMenu"> 戻る</span>
    <div class="img-container" >
        <img v-bind:src="getCharacter.headImage" class="responsive-image">
        <div class="conversation">
            <span class="name">{{getCharacter.name}}</span>
            <p class="text typewriter-text"> {{outputText}}</p>
        </div>
        <button>Start</button>
    </div>
    <Counter ></Counter>
</div>

脚本：导出默认值{ 名称：“实践”，方法： { outText（）{

            if (this.inc < this.text1.length) {
                this.outputText += this.text1.charAt(this.inc);
                this.inc ++;
                setTimeout(this.outText() , 100000)

            }
        }
    },
    mounted() {
        this.outText()
    },
    data() {
        return {
            text1 :'こんにちは。あなたの日本語聞かせてほしいな！まずは練習！',
            outputText : '',
            inc:0
        }
    }
}

css：

<style scoped>
.text {
    background-color: #ababab;
    padding: 4%;
    border-radius: 0 14px 14px 14px;
    margin: 0;
    width: 85vw;
    height: 10vh;
}

Answer 1

当您将outText方法作为参数传递给setTimeout时，不应调用setTimeout方法，这样做会立即调用该方法，而您想将方法传递给setTimeout(this.outText(), 100000)因此可以在超时结束后稍后调用。

不正确：

setTimeout(this.outText, 100000)

正确：

logLevel = "DEBUG"
defaultEntryPoints = ["http", "https"]

[api]

[entryPoints]
 [entryPoints.http]
   address = ":80"
   [entryPoints.http.redirect]
     entryPoint = "https"
 [entryPoints.https]
   address = ":443"
   [entryPoints.https.tls]

[docker]
domain = "docker.local"
watch = true
swarmMode = true
#exposedbydefault = false

100000ms（100s）太长的延迟也无法引起注意。

如何在vuejs中产生打字效果

1 个答案: