如何實作vue input輸入框模糊查詢

這次帶給大家如何實現vue input輸入框模糊查詢，實作vue input輸入框模糊查詢的注意事項有哪些，下面就是實戰案例，一起來看一下。

Vue 模糊查詢功能

原則：原生js的search() 方法，用於檢索字串中指定的子字串，或檢索與正規表示式相符的子字串。如果沒有找到任何符合的子字串，則傳回 -1。

input輸入框，模糊查詢

<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中文網其它相關文章！

推薦閱讀：

怎麼進行mpvue小程式專案建構

#VUE2.0Jsonp使用步奏詳解

以上是如何實作vue input輸入框模糊查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！