Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie eine Fuzzy-Abfrage im Vue-Eingabefeld

So implementieren Sie eine Fuzzy-Abfrage im Vue-Eingabefeld

php中世界最好的语言
php中世界最好的语言Original
2018-05-28 12:01:568381Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn