Comment implémenter une requête floue dans la zone de saisie vue

Cette fois, je vais vous montrer comment implémenter une requête floue de la boîte de saisie vue input. Quelles sont les précautions pour implémenter une requête floue de la boîte de saisie vue input. Ce qui suit est un cas pratique, prenons un. regarder.

Fonction de requête floue Vue

Principe : La méthode search() de js natif est utilisée pour récupérer la sous-chaîne spécifiée dans la string, Ou récupérer une sous-chaîne correspondant à l'expression régulière. Si aucune sous-chaîne correspondante n'est trouvée, -1 est renvoyé.

zone de saisie, requête floue

<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>

L'effet est le suivant :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer un projet d'applet mpvue

Étapes détaillées pour utiliser Jsonp dans VUE2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!