Teks masalah tidak dikemas kini selepas naik taraf vue 3

Question

Saya cuba menulis semula komponen untuk vue 3, lebih khusus menggunakan skrip persediaan baharu mereka supaya kod itu kelihatan lebih bersih, inilah rupanya pada masa ini.

export default {
    name: "typeWriter",
    data: () => {
        return {
            typeValue: "",
            typeStatus: false,
            displayTextArray: ['Art', 'Science', 'Math', 'Everything'],
            typingSpeed: 70,
            erasingSpeed: 70,
            newTextDelay: 1000,
            displayTextArrayIndex: 0,
            charIndex: 0,
        };
    },
    created() {
        setTimeout(this.typeText, this.newTextDelay + 200);
    },
    methods: {
        typeText() {
            if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
                if (!this.typeStatus) {
                    this.typeStatus = true;
                }

                this.typeValue += this.displayTextArray[this.displayTextArrayIndex].charAt(this.charIndex);
                this.charIndex++;

                setTimeout(this.typeText, this.typingSpeed);
            } else {
                this.typeStatus = false;

                // stop the typing once we hit the last thing we wish to type.
                if (this.displayTextArrayIndex + 1 >= this.displayTextArray.length) {
                    return
                }

                setTimeout(this.eraseText, this.newTextDelay);
            }
        },
        eraseText() {
            if (this.charIndex > 0) {
                if (!this.typeStatus) {
                    this.typeStatus = true;
                }

                this.typeValue = this.displayTextArray[this.displayTextArrayIndex].substring(0, this.charIndex - 1);
                this.charIndex -= 1;

                setTimeout(this.eraseText, this.erasingSpeed);
            } else {
                this.typeStatus = false;
                this.displayTextArrayIndex++;

                setTimeout(this.typeText, this.typingSpeed + 1000);
            }
        },
    },
};

Ini ialah kod vue 3 baharu menggunakan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved