So implementieren Sie eine Fuzzy-Abfrage im Vue-Eingabefeld

Dieses Mal zeige ich Ihnen, wie Sie die Fuzzy-Abfrage des Vue-Eingabefelds implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Fuzzy-Abfrage des Vue-Eingabefelds? sehen.

Vue-Fuzzy-Abfragefunktion

Prinzip: Die search()-Methode von nativem js wird verwendet, um die in der Zeichenfolge angegebene Teilzeichenfolge abzurufen Rufen Sie eine Teilzeichenfolge ab, die dem regulären Ausdruck entspricht. Wenn kein passender Teilstring gefunden wird, wird -1 zurückgegeben.

Eingabefeld, Fuzzy-Abfrage

<template>
 <p>
  <input type="text" placeholder="请输入..." v-model="searchVal">
  <ul>
   <li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li>
  </ul>
 </p>
</template>
<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   searchVal: "",
   items: [
    {
     name: "上海",
     value: "sh"
    },
    {
     name: "北京",
     value: "bj"
    },
    {
     name: "重庆",
     value: "cq"
    },
    {
     name: "嗨嗨嗨",
     value: "hhh"
    },
    {
     name: "海上",
     value: "hs"
    },
    {
     name: "京都",
     value: "jd"
    }
   ]
  };
 },
 methods: {},
 computed: {
  NewItems() {
   var _this = this;
   var NewItems = [];
   this.items.map(function(item) {
    if (item.name.search(_this.searchVal) != -1) {
     NewItems.push(item);
    }
   });
   return NewItems;
  }
 }
};
</script>

Der Effekt ist wie folgt:

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie ein MPvue-Applet-Projekt

Detaillierte Schritte zur Verwendung von Jsonp in VUE2.0

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Fuzzy-Abfrage im Vue-Eingabefeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!