Vue入力ボックスでファジークエリを実装する方法

今回は、vue 入力ボックスでファジー クエリを実装する方法と、vue 入力ボックスでファジー クエリを実装するための注意事項について説明します。以下は実際的なケースです。

Vueのファジークエリ関数

原則: ネイティブjsのsearch()メソッドは、

stringで指定された部分文字列を取得するか、正規表現に一致する部分文字列を取得するために使用されます。一致する部分文字列が見つからない場合は、-1 が返されます。

入力ボックス、ファジークエリ

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

その効果は次のとおりです:

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな情報については、注目してください。その他の関連記事は PHP 中国語 Web サイトにあります。

推奨読書:

mpvue アプレット プロジェクトをビルドする方法

VUE2.0 で Jsonp を使用する手順の詳細な説明

以上がVue入力ボックスでファジークエリを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。