Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue

Vorwort

Die sogenannte Fuzzy-Abfrage dient dazu, Abfragedienste ohne die vollständige Eingabe oder alle Eingabeinformationen des Benutzers bereitzustellen, d. h. der Benutzer kann während der Eingabe die Eingabeaufforderungsinformationen (tatsächlich die in der Abfrage gefundenen übereinstimmenden Informationen) sehen. Die Suchfunktion von Baidu ist ein gutes Beispiel für eine Fuzzy-Abfrage. Tatsächlich besteht das Prinzip der Fuzzy-Abfrage darin, das OnInput-Ereignis an das Eingabefeld zu binden, um die Benutzereingabe zu überwachen. Jedes Mal, wenn der Benutzer Informationen in das Eingabefeld eingibt, wird das Ereignis zur Abfrage ausgelöst und dann in Echtzeit angezeigt. Das Prinzip ist sehr einfach, aber bei der Umsetzung wird es einige Probleme geben. Wir können uns vorstellen, dass jedes Mal, wenn ein Zeichen eingegeben wird, ein Ereignis ausgelöst wird. Was ist, wenn wir eine lange Nachricht eingeben müssen? Muss die Abfrage dann mehrmals ausgelöst werden? Wenn Ajax mehrmals hintereinander ausgelöst wird und unser Methodenkörper Methoden zum Bearbeiten von DOM-Elementen enthält, gerät unser Browser zwangsläufig in einen Zustand der Schwebe oder stürzt sogar ab. Gibt es dann eine Möglichkeit, dieses Problem zu lösen? Die Antwort ist: Ja

Vue implementiert Fuzzy-Abfragen

Implementierung von Fuzzy-Abfragen in Vue durch Überwachung und Berechnung

Die Hörmethode kann auch mit der Berechnungsmethode implementiert werden. Es wird jedoch empfohlen, die Berechnungsmethode zu verwenden, da die Hörmethode komplizierter ist.

Schauen Sie sich zunächst die folgende Code-Implementierung an

Implementiert durch rechnerische

Umsetzung durch Watch

HTML-Code <div id="root">
        <h2>Mitarbeiterliste</h2>
        <input type="text" placeholder="Bitte geben Sie Ihren Namen ein" v-model="keyWord">
        <ul>
            <li v-for="(p,index) von filPersons" :key="index">
                {{p.name}}-{{p.alter}}-{{p.geschlecht}}
            </li>
        </ul>
    </div>

Skriptcode neuer Vue({
        el:"#Wurzel",
        Daten:{
            Stichwort:'',
            Personen:

                {id:'001',name:'Ma Dongmei',alter:18,geschlecht:'weiblich'},
                {id:'002',name:'Zhou Dongyu',alter:19,geschlecht:'weiblich'},
                {id:'003',name:'Jay Chou',alter:21,geschlecht:'männlich'},
                {id:'004',name:'Deric Wan',alter:22,geschlecht:'männlich'}
        ],
        },
        berechnet:{
            filPersons(){
                return this.persons.filter((p)=>{//Gibt das gefilterte Array zurück return p.name.indexOf(this.keyWord) !==-1
                })//Filter ist eine Filterfunktion, die Fälle entfernt, die keine Schlüsselwörter enthalten}
        }
    })

Verwenden Sie die Überwachungsfunktion, um zu überwachen, ob sich der Wert der Box ändert

HTML-Code bleibt unverändert Script-Code new Vue({
        el:"#Wurzel",
        Daten:{
            Stichwort:'',
            Personen:

                {id:'001',name:'Ma Dongmei',alter:18,geschlecht:'weiblich'},
                {id:'002',name:'Zhou Dongyu',alter:19,geschlecht:'weiblich'},
                {id:'003',name:'Jay Chou',alter:21,geschlecht:'männlich'},
                {id:'004',name:'Deric Wan',alter:22,geschlecht:'männlich'}
        ],
        filPersons:[//Wenn dies nicht vorhanden ist, kann der Wert von Personen nicht auf den ursprünglichen Wert zurückgesetzt werden]
        
        },
        betrachten:{
            Stichwort:{
                immediate:true, //Führe die folgende Funktion aus, um alle Situationen anzuzeigen, in denen sich der Wert der Box nicht geändert hat handler(val){
                    diese.filPersonen = diese.personen.filter((p)=>{
                    return p.name.indexOf(val) !==-1
                })
                }
            }
            
        }
    })

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung von Fuzzy-Abfragen durch Vue. Weitere relevante Inhalte zur Implementierung von Fuzzy-Abfragen durch 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!