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

Natives JS zur Realisierung eines springenden Balls

Aus einer Laune heraus habe ich eine Fallstudie ü...

MySQL Slow Query-Optimierung: Die Vorteile von Limit aus Theorie und Praxis

Oftmals erwarten wir, dass das Abfrageergebnis hö...

Analyse der gemeinsamen Indexfunktion von MySQL und Anwendungsbeispiele

Dieser Artikel veranschaulicht anhand von Beispie...

Detaillierte Erklärung der JavaScript-Prototypenkette

Inhaltsverzeichnis 1. Konstruktoren und Instanzen...

Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript

Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...

So fügen Sie Emoji-Ausdrücke in MySQL ein

Vorwort Als ich heute ein Feedback-Formular für e...

Grundlegendes zur CSS-Eigenschaft „transform-origin“

Vorwort Ich habe vor kurzem eine Feuerwerksanimat...

Der einfachste Weg zum Debuggen gespeicherter Prozeduren in MySQL

Ein Kollege hat mir einmal gesagt, ich solle eine...

Eine kurze Diskussion über 3 bemerkenswerte neue Features in TypeScript 3.7

Inhaltsverzeichnis Vorwort Optionale Verkettung N...

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

Installation von Python 3 1. Abhängige Umgebung i...

Detailliertes Beispiel für MySQL-Datenspeicherprozessparameter

Es gibt drei Typen von MySQL-gespeicherten Prozed...

Ein Artikel zum Verständnis der erweiterten Funktionen von K8S

Inhaltsverzeichnis Erweiterte Funktionen des K8S ...

Methode zum Erstellen eines Redis-Clusters basierend auf Docker

Laden Sie das Redis-Image herunter Docker-Pull yy...