Vue implementiert kleine Suchfunktion

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung der Suchfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
 </Kopf>
 <Text>
  <div id="app">
   <input type="text" v-model="keyword" placeholder="Schlüsselwort eingeben" />
   <div Klasse="Liste">
    <div Klasse="Artikel" v-for="Artikel in fFruit" :key="Artikel">
     {{Artikel}}
    </div>
   </div>
  </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <Skripttyp="text/javascript">
  neuer Vue({
   el:"#app",
   Daten(){
    zurückkehren {
     Stichwort:"",
     Obst:
      "Apfel", "Sandapfel", "Begonie", "Aronia", "Mispel", "Weißdorn", "Weißdorn", "Birne",
      "Schneebirne", "Quincea", "Hagebutte", "Rannon", "Aprikose", "Kirsche", "Pfirsich", "Pfirsich",
      "Nektarine", "Pfirsich", "Pflaume", "Pflaume", "Pflaume", "Weiße Jadekirsche", "Brombeere",
      "Himbeere", "Moltebeere", "Loganbeere", "Brünette", "Erdbeere", "Ananasbeere", "Orange",
      "Zuckerorange", "Orange", "Zitrone", "Limette", "Pomelo", "Kumquat", "Grapefruit", "Zitrone",
      „Buddhas Hand“, „Fingerorange“, „Gelbe Frucht“, „Melone“, „Cantaloupe“, „Honigmelone“, „Stachelige Hornmelone“
     ]
    }
   },
   berechnet:{
    "fFrucht"(){
     // Wenn das Schlüsselwort leer ist, gib alle Früchte zurück if(this.keyword==""){
     gib diese Frucht zurück;
    }anders{
     // Wenn ein bestimmtes Element in Frui Schlüsselworttext enthält, behalte die aktuellen Daten. // Der Filter gibt „true“ zurück, um die Daten beizubehalten, und „false“, um sie herauszufiltern. return this.fruit.filter(item=>{
      returniere item.includes(dieses.Schlüsselwort)
     })
    }
    }
    
   }
  })
 </Skript>
</html>

Ergebnis:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Implementierung eines einfachen Suchfelds basierend auf Vue.js
So verwenden Sie Vue + Element, um Tabellenpaging und Front-End-Suche zu implementieren
Vue.js implementiert Tabellenfunktionen für die Filterung, Suche, Sortierung und Paginierung mehrerer Bedingungen
Vue implementiert Suchfunktion
Vue-Elementgruppierung + Mehrfachauswahl + durchsuchbares Select-Selektor-Implementierungsbeispiel
Vue el-autocomplete Remote Search-Dropdown-Feld und Implementierung der automatischen Füllfunktion (empfohlen)
Durchsuchbare Dropdown-Box-Funktion für Vue-Komponenten
Implementierung einer benutzerdefinierten Komponente für ein durchsuchbares Dropdown-Feld basierend auf Vue
Vuejs verwendet filterBy und orderBy, um Suchfilterung und absteigende Sortierung von Daten zu implementieren
Detaillierte Erläuterung der Verwendung der Vue2.0-Suchkomponente mit mehreren Bedingungen

<<: Suchmaschinenfreie Sammlung von Website-Einträgen

>>: Eine kurze Erläuterung des zugrunde liegenden Prinzips von MySQL Join