Vue führt einen einfachen zufälligen Namensaufruf durch

Vue führt einen einfachen zufälligen Namensaufruf durch

Layoutteil:

<div id="app">
        <p>{{Ergebnis}}</p>
        <button @click="randomName()">{{txt}}</button>
    </div>


Vue-Teil:

 <Skript>
        lass vm = neues Vue({
            el:'#app',
            Daten:{
                Liste: ["Xiaoyi", "Lier", "Wangsan", "Samstag", "Zhangwu"],
                // Zufällig benanntes Inhaltsergebnis:'',
                //Button-Textinhalt txt: „Appell starten“,
                // Prozesssteuerungsschalter offen: true,
                //Definieren Sie den Zeitschalter timer:null
            },
            Methoden: {
                bewegen(){
                    // Holen Sie sich eine Zufallszahl zwischen 0 und der Länge des aktuellen Arrays let random = Math.floor(Math.random()*(this.list.length-0))
 
                    // Lassen Sie die Zufallszahl zum zufälligen Index des Listen-Arrays werden, weisen Sie sie dem Ergebnis zu und rendern Sie sie auf der Seite this.result = this.list[random]
                },
                zufälligerName(){
                    // Prozesssteuerung wechseln if(this.open){
                        //Definieren Sie den Timer und rufen Sie die Move-Methode auf: this.timer = setInterval(this.move,100)
                        this.txt = "Hör auf, Leute zu beschimpfen"
                        dies.öffnen = false
                    }anders{
                        // Lösche den Timer clearInterval(this.timer)
                        this.txt = "Namensaufruf starten"
                        dies.öffnen = wahr
                    }
                }
            }
        })
    </Skript>


Sehen Sie sich die Ergebnisse an:

Dies ist das Ende dieses Artikels über die Durchführung eines einfachen zufälligen Namensaufrufs mit Vue. Weitere Informationen zur Durchführung eines zufälligen Namensaufrufs mit Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering

>>:  Tutorial zur Installation und Browserverwendung des leichten Objektspeicherdienstes Minio

Artikel empfehlen

Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

Effektbild: Vorwort: Kürzlich arbeitete ich an ei...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15

In diesem Artikel werden die Installations- und K...

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Sich gut zu ernähren und ausreichend zu schlafen,...

JavaScript-Farbbetrachter

In diesem Artikelbeispiel wird der spezifische Ja...

So verbinden Sie JDBC mit MySQL 5.7

1. Bereiten Sie zunächst die MySQL- und Eclipse-U...

Das WeChat-Applet realisiert die Funktion zum Hochladen von Bildern

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der Redis-Master-Slave-Replikationspraxis mit Docker

Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...

Der beste Weg, um den 1px-Rand auf Mobilgeräten zu lösen (empfohlen)

Bei der Entwicklung für Mobilgeräte tritt häufig ...

Bootstrap FileInput implementiert Bild-Upload-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Ein Bugfix für Tomcats automatisches Herunterfahren

Vorwort Bei einem seit 4 Jahren laufenden Java EE...

Eine Zusammenfassung der Gründe, warum MySQL keinen Datumsfeldindex verwendet

Inhaltsverzeichnis Hintergrund erkunden Zusammenf...